html - 悬停在不透明度下无法正常工作

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 上时，我需要将 .thumbnail-area 的不透明度设置为 1。但它似乎不起作用。请帮我。

Answer 1

你的 .thumbnail-area 没有嵌套在 .thumbnail 下，它与它相邻，所以你需要

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

Demo

Demo 2 (使用 position: relative; 容器限制 absolute 定位元素)

Demo 3 (为真实预览添加了图像)

---

此外，如果您在上一个演示中看到，即演示 3，opacity 不舒服，您可以使用 display: none; 和 :悬停 使其成为display: block; 因为无论如何你都没有褪色 元素或过渡，因此您不需要 opacity