1

他のスレッドで回答する必要がある質問を投稿して申し訳ありませんが、最後の 1 時間の解決策を試しても成功しなかったため、別の場所でのコーディングが間違っていると想定する必要があります。プロジェクトを見るのにスキップしたい場合は、#final_sale などの他の div にマウスを合わせたときに #info_area が表示されるようにする必要があります。 プロジェクトへのリンク

cssはこんな感じ

#final_sale {
   width: 474px;
   position: absolute;
   top: 691px;
   left: 5px;
   transition: width 1s, height 1s;
   -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
#final_sale:hover {
   width: 575px;
   position:absolute;
   top:691px;
   left:5px;    
}

すべてのホバー div のコードは次のようになります。「final_sale」以外の名前が付けられています。これらのすべての div には、「show_info」(.show_info) のクラスもあり、以下の html で確認できます。

他の投稿から離れて、次のような情報エリアがあります。

#info_area {
   background-color: #666;
   display: block;
   opacity:0;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
   transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
}
.show_info:hover #info_area {
   background-color: #666;
   display: block;
   opacity:0.5;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
}

「.show_info:hover + #info_area」も試しました

これがHTMLです。「info_area」が他のdivの1つにネストされていないためかもしれませんが、それも試して、CSSにメインを含むdivを含めようとしました。

html

<div id="funnel_container">
    <!---description blocks---->
        <div id="info_area">
           info here
        </div>
    <!---description block end--->

    <!-----main mouse over blocks---->
    <div id="leads" class="show_info">
         <img src="Leads to be qualified(yellow).jpg" alt="leads to be qualified" class="title_block" />
    </div>
    <div id="scoring" class="show_info">
        <img src="scoring and cultivation(blue).jpg" alt="scoring and cultivation" class="title_block" />
    </div>
    <div id="sales" class="show_info">
        <img src="qualified sales lead(red).jpg" alt="qualified sales leads" class="title_block" />
    </div>
    <div id="final_sale" class="show_info">
        <img src="final sale(orange).jpg" alt="Final Sale" class="title_block" />
    </div>
<!---end of main blocks---->
</div>

プロジェクトをHEREにアップロードしました。完成していないか、最終的に移動する場所に配置されていないため、完全に Web 対応になっていないため、ロードに数秒かかる場合があります。

助けてくれる人に前もって感謝します。一晩中私を夢中にさせていました。私が見逃していた単純なものを望んでいます。

4

1 に答える 1

2

#info_area最後の兄弟を作成できる場合は、一般的な兄弟コンビネータを使用してこれを実現できます。

.show_info:hover ~ #info_area{
  ...
}
于 2013-06-18T23:51:02.470 に答える