Question

我在页面上有多个图像（.entry），并希望为每个隐藏的图像添加一个按钮，并在用户将鼠标悬停在图像上时显示。我做了一些研究，发现当悬停在一个元素上时如何影响多个元素。但我想做相反的事情：我想简化我的CSS button {"display: block;"}以获取任何图像的悬停状态。

我试过了：

1）

.entry01, .entry02, .entry03, .entry04, .entry05, .entry06, .entry07, .entry08, .entry09:hover button{
    display: block;
}

结果：当我将鼠标悬停在第9张图片上时，按钮仅显示

2）

.entry01:hover, .entry02:hover, .entry03:hover, .entry04:hover, .entry05:hover, .entry06:hover, .entry07:hover, .entry08:hover, .entry09:hover button{
    display: block;
}

结果：当我将鼠标悬停在第9张图片上时，按钮仅显示

我认为我可以为每个人单独写出来但希望学习更短的方法。我很欣赏任何想法！感谢!!!

Answer 1

您可以在html代码中为所有.entry（1-9）标记添加新类：

<div class="hover entry1></div>
<div class="hover entry2></div>

等

现在在你的css文件中：

.hover:hover button{
    display: block;
}

Answer 2

您需要在每个选择器中重复button：

.entry01:hover button, .entry02:hover button, .entry03:hover button, ... {
    display: block;
}

每个逗号分隔的项目都被视为完整的选择器。如果你使用像LESS或SASS这样的预处理器，你可以简化它。

更好的解决方案可能是给所有人提供相同的等级，例如

<div class="entry entry01">...</div>

然后你可以使用：

.entry:hover button {
    display: block;
}

Answer 3

试试这个......

<div class="entry">Image 1
    <button class="btn">Button 1</button>
</div>
<div class="entry">Image 2
    <button class="btn">Button 2</button>
</div>

.btn{display:none;}
.entry:hover button{display:block;}

这是一个有效的JSFiddle http://jsfiddle.net/DivakarDass/k0pggay1/

选择：悬停多个元素

3 个答案: