コンテナの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状態を直接適用することができます。

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

Answer 2

だけ

.link-block:hover {