Question

HTML

        <div class="col-md-3">
            <img src="img/thumnail1.jpg" class="thumbnail">
            <div class="thumbnail-area fa fa-search-plus"></div>
        </div>

CSS

.thumbnail:hover{
    background-color: #6bb533;
    border: 1px solid #6bb533;
}
.thumbnail:hover .thumbnail-area{
    opacity:1;
}
.thumbnail-area{
    background: #6bb533;
    position: absolute;
    display: inline-block;
    padding: 10px;
    bottom: 20px;
    right: -1px;
    font-size: 21px;
    color: #fff;
    opacity:0;
}

在悬停.thumbnail-area时，我需要将1的不透明度设为.thumbnail。但它似乎不起作用。请帮我。

Answer 1

您的.thumbnail-area未嵌套在.thumbnail下，它与此相邻，因此您需要

.thumbnail:hover + .thumbnail-area{
    opacity:1;
}

Demo

Demo 2 （使用absolute容器限定了position: relative;定位元素

Demo 3 （为实际预览添加了图片）

另外，如果您在上一个演示中看到，即演示3，opacity不舒服，您可以使用display: none;并在:hover上将display: block;设为opacity无论如何你不会褪色元素或转换，因此您不需要{{1}}

悬停不正常与不透明度

1 个答案: