1

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

另一个小问题是第二个 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/9/

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

.main-img:active {
    display:block;
}
于 2013-09-24T18:46:57.003 回答
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 回答