html - 简单的 css 悬停问题

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');
        })
    })

希望对您有所帮助。