Question

我有这个网站

当您将箭头放在图片上时...我想显示叠加效果。

我试着这样做，我收到了答案。

问题是我的网站无法实现此示例。

HTML代码

<div class="hover" style="display: none;">
       <a href="http://www.altradona.ro/logitech-dinovo-edge-keyboard.html" title="Logitech diNovo Edge Keyboard" class="product-image">
           <img src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/l/o/logitech-dinovo-edge-keyboard.jpg" data-srcx2="http://www.altradona.ro/media/catalog/product/cache/1/small_image/504x504/9df78eab33525d08d6e5fb8d27136e95/l/o/logitech-dinovo-edge-keyboard.jpg" width="252" height="252" alt="Logitech diNovo Edge Keyboard">
       </a>

</div>

我尝试使用 CSS代码：

     .hover a  img {
            position:relative;
            z-index:0; 
            max-width:100%;
            height:auto; width:auto\9; /* ie8 */ 
        }

  .hover  a {
        position: relative;
        display: inline-block;
    }

   .hover a:hover:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(fallback-transparent.png); /* if opacity not supported */
        background: red;
        opacity: 0.3;
    }

此代码的实现有问题吗？你告诉我，为什么不工作？

提前致谢！

Answer 1

我认为由于某些结构化问题，您的悬停效果未得到应用。

您可以在样式表中使用以下内容来实现悬停效果。

您的每个产品都有class=item，因此请添加以下样式：

.item:hover{
  opacity:0.3;
  }

我认为它会解决你的目的。

如何对这些图像应用叠加效果？

1 个答案: