Question

我正在创建一个画廊网站，我的目标是使用鼠标悬停在图片底部时显示选项按钮。以下是pixabay

上我想要的示例

<div class="image-thumbnail col-lg-2 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
    </a>
    <div class="image-options">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm ">
                <i class="fa fa-thumbs-up"></i>
            </button>
            <button type="button" class="btn btn-sm ">
                <i class="fa fa-thumbs-down"></i>
            </button>
            <button type="button" class="btn btn-sm">
                <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-sm">
                <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-sm">
                <i class="fa fa-twitter"></i>
            </button>
        </div>
    </div>
</div>

CSS

div.image-thumbnail div.image-options {
    position: absolute;
    z-index: 2000;
    margin-top: -55px;
    margin-left: 1px;
    display: none;
}
div.image-thumbnail div.image-options:hover {
    display: inline;
}

有什么想法吗？

编辑：

事实证明

div.image-thumbnail  div.image-options {
    position: absolute;
    z-index: 2000;
    margin-top: -55px;
    margin-left: 1px;
    display: none;
}

完全无法工作，因为即使使用image-options

，display:none仍然可见

Answer 1

您无法将元素悬停在display: none上，但它不可见。相反，您应该在:hover元素上定义.image-thumbnail规则：

.image-thumbnail {
    position: relative;
}
.image-thumbnail .image-options {
    position: absolute;
    z-index: 2000;
    margin-top: -55px;
    margin-left: 1px;
    display: none;
}
.image-thumbnail:hover .image-options {
    display: inline;
}

Answer 2

正如我的评论所述。

div.image-thumbnail div.image-options:hover {
    display: inline;
}

这是说当我们将鼠标悬停在div.image-options上时显示它......这是不可能的。（正如您设置为display: none）加上这不是您想要设置悬停的元素。

你的意思是

div.image-thumbnail:hover div.image-options {
    display: inline;
}

当我们将鼠标悬停在div.image-thumbnail上时，请显示div.image-options。

为什么我的CSS选择器不能按预期工作？

2 个答案: