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;
}

所以这里重要的类是链接块，如上所述，目标是简单地强制该类中的所有元素使用这些悬停属性。

以下是需要的：

但这是发生的事情：

感谢任何合理的建议！

Answer 1

a是一个内联元素，因此您需要将其设置为display：block，然后您可以直接将：hover状态应用于它。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需更改

即可

.link-block *:hover {

到

.link-block:hover {