选择 :hover 用于多个元素

Question

我在一个页面上有多个图像 (.entry)，我想为每个图像添加一个按钮，该按钮在用户将鼠标悬停在图像上时隐藏和显示。我做了一些研究，发现了将鼠标悬停在一个元素上时如何影响多个元素。但我想做相反的事情：我想 shorthand 我的 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

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

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

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

一个更好的解决方案可能是给所有这些相同的 class，例如

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

那么你可以使用：

.entry:hover button {
    display: block;
}

Answer 2

您可以向 html 代码中的所有 .entry(1-9) 标签添加新的 class：

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

等等

现在在您的 css 文件中：

.hover: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/

选择 :hover 用于多个元素

Selecting :hover for multiple elements

css

hover