html - CSS 悬停在容器上

Question

所以说到 CSS，我一般都非常精通，但我有一些让我感到困惑的事情。这里的目标是容器内的元素集契约(Contract)时具有相同的悬停效果。这是到目前为止的代码: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;
}

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

这是需要的:

但这是正在发生的事情:

感谢任何合理的建议!

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>