Question

如果标题令人困惑，请道歉。基本上我有一个div，在悬停时，激活第二个div到display:block，将其显示在底层div上方。除了在第二个div上移动光标时遇到的闪烁之外，效果很好。

另一个小问题是第二个div在点击时会消失几分之一秒。

检查此jsFiddle以获取示例：http://jsfiddle.net/uB82S/1/

Answer 1

**

View this Fiddle

**

将您的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;
}

Answer 2

您可以尝试将悬停放在产品容器上。这样，它为主图像显示提供了更稳定的方式

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

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

.main-img:active {
    display:block;
}

Answer 3

只需使用正确的选择器即可。见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;
}

在另一个div悬停时覆盖div的闪烁问题

3 个答案:

View this Fiddle