Question

我有这个简单的HTML：

<div class="candy">
  <p style="position: absolute">COLLECTIONS</p>
  <div>
    <img class="candy" style="width: 100%; height: auto;" src="http://www.backlabel.com/eshop/img/cms/collections/collections.jpg" width="467" height="702" />
  </div>
</div>

这个简单的CSS：

.candy {
  -webkit-transition: all 0,3s ease;
  -moz-transition: all 0,3s ease;
  -o-transition: all 0,3s ease;
  -ms-transition: all 0,3s ease;
  transition: all 0,3s ease;
}

.candy:hover {
  -webkit-filter: opacity(0.3);
}

悬停图像时，不应用不透明度滤镜。

我使用Prestashop，如果有用的话。

非常感谢。

Answer 1

HTML：

<div class="wrapper">
    <div class="content-block">
        <h3><a href="#">COLLECTION</a></h3>
    </div>
    <div class="image-block">
        <img src="dreamy_1.jpg">
    </div>
</div>

CSS：

.wrapper{
            width: 100%;
            height: auto;
            position: relative;
            overflow: hidden;

        }
        .image-block{
            width: 100%;
            height: auto;
            -webkit-transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            transition: all ease-in-out 0.3s;
        }
        .image-block img{
            width: 100%;
            height: auto;
        }
        .content-block{
            position: absolute;
            top: 40%;
            width: 100%;
            height: auto;
            z-index: 999;
        }
        .content-block h3{
            width: 100%;
            margin: 0 auto;
        }
        .content-block a{
            display: block;
            text-align: center;
        }
        .transparent{
            -webkit-filter: opacity(0.3);

        }

jQuery的：

$(document).ready(function(){
        $('.content-block a').hover (function(){
            $('.image-block').toggleClass('transparent');
        })
    })

希望有所帮助。

Answer 2

这应该有效：

img.candy:hover {
 opacity: 0.3;
}

简单的css悬停问题

2 个答案: