CSS容器中的悬停效果

Question

我很擅长CSS，但有一个问题困扰了我。目标是在容器内部一组元素同时拥有相同的悬停效果。以下是目前的代码：

HTML：

<a href="" class="link-block no-decoration">
   <h6 class="uppercase">whitepaper</h6>
   <div class="section-break section-break-sm">
      <h4>Cras Fusce Fermentum Tortor Porta 4</h4>
      <span class="icon-file icon-2x">​</span>
   </div>
</a>

CSS：

.link-block *:hover {
    color: #0eb2ff !important;
    border-top-color: #0eb2ff;
}

这里重要的类是link-block，目标是强制该类中的所有元素都使用这些hover属性，如上所述。

需要的内容如下：

但实际情况是：

感谢任何有建设性的建议！

- tganyan

---

你尝试过使用 .link-block:hover * {...} 吗？ - blurfus

我尝试了您提供的两个建议，但最好的结果似乎是只有在鼠标悬停在文本元素上时才会改变颜色，而不是在容器悬停时改变颜色，这并不是期望的结果。 - tganyan

Answer 1

a 是内联元素，所以您需要将其设置为 display:block，然后直接应用 :hover 状态即可。

.link-block {
  display:block
}
  
  .link-block:hover {
    color: #0eb2ff !important;
    border-top-color: #0eb2ff;
}

<a href="" class="link-block no-decoration">
   <h6 class="uppercase">whitepaper</h6>
   <div class="section-break section-break-sm">
      <h4>Cras Fusce Fermentum Tortor Porta 4</h4>
      <span class="icon-file icon-2x">​</span>
   </div>
</a>

- gavgrif

---

很好的建议，我没有想到过。我点了个赞，因为这是合理的逻辑，但遗憾的是没有绿色的勾选，因为它并没有完全解决问题（现在图标和边框在悬停时会高亮显示；然而，文本元素只有在你特别悬停在它们上面时才会高亮显示，而不是当你只是悬停在容器上时）。我后来注意到一些全局的东西在起作用，所以看起来我可能正在处理特异性问题。如果是这样的话，我会回来给你一个绿色的勾选；)。 - tganyan

Answer 2

只需更改

.link-block *:hover {

为了

.link-block:hover {

- Florian

---

点赞因为这是一个聪明的建议，不幸的是我已经尝试过了，但并没有解决问题。 - tganyan