1

タイトルが紛らわしい場合はご容赦ください。基本的に、ホバーすると、2番目のdivをアクティブにしてdisplay:block、基になるdivの上に表示するdivがあります。カーソルを 2 番目の div に移動するときに発生するちらつきを除いて、うまく機能します。

もう 1 つの小さな問題は、2 番目の div をクリックすると一瞬消えることです。

例については、この jsFiddle を確認してください: http://jsfiddle.net/uB82S/1/

4

3 に答える 3

3

**

このフィドルを見る

**

HTML を次のように変更します。

<div class="product-main">

   <div id="img-container" class="img-container">

   <div class="feature-product-img" id="feature-product-img" style="display: block;">
      <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
           <img class="product-img" src="http://www.spinnakerextreme.com/media/catalog/product/p/r/product_2_bg.png" alt="2012 TT Isle of Man Official Review Blu Ray and DVD" />
      </a>
      ****move this inside the feature-product div****
     <div class="main-img" id="main-img">
        <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
            <img src="http://www.spinnakerextreme.com/media/catalog/product/cache/1/small_image/9df78eab33525d08d6e5fb8d27136e95/t/t/tt_man_review_1.png" height="184" id="main-image-img"/>
        </a>
     </div>
     ************
 </div>
</div>
<div class="product-description">
  <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
      2012 TT Isle of Man Official Review Blu Ray and DVD
   </a>
</div>

css を次のように変更します。

.feature-product-img:hover > .main-img{
 display:block;
}

.feature-product-img .main-img:active {
display:block;
}
于 2013-09-24T18:41:40.403 に答える
0

正しいセレクターを使用してください。http://jsfiddle.net/uB82S/7/を参照してください

/*
.feature-product-img:hover + .main-img {
    display:block;
}
.feature-product-img + .main-img:active {
    display:block;
}
* replace with below ..
*/
#img-container:hover div#main-img {
    cursor: pointer;
    display: block;
}
于 2013-09-24T18:48:28.073 に答える
0

代わりに製品コンテナーにホバーを配置してみてください。このようにして、メイン画像を表示するためのより安定した方法を提供します

http://jsfiddle.net/uB82S/9/

.product-main {
    display: inline-block;
}
.product-main:hover .main-img{
    display:block;
}

.main-img:active {
    display:block;
}
于 2013-09-24T18:46:57.003 に答える