CSS：機能していない

Question

私はCSS に問題があります：機能はありません。

リンクにマウスを移動すると、両方とも下線が付きます。Item1 & Description。私は下線を表示したくない。ホバー時の説明。ここで

は私のメニューコードです：

<ul> 
<li> 
    <a href="#"> 
    Item 1 
    <span>Description</span> 
    </a> 
</li> 
</ul> 

はCSS：

span { display:block; } 
ul li a:hover:not(span) { color:blue; text-decoration: underline; } 

私はそれは素敵な作業だけでブロックする必要がありますされインラインブロックにスパン表示を変更します。どうすれば解決できますか？

また、インラインブロックには、アイテムのNEARの説明が表示されます。アイテム名の下に置いておきたい。どうしたらいいですか？

Answer 1

あなたのスタイルaに言っている：AコースのSPANではないこと、スパンではない、ない（スパン）;

使用A）

span { display:block; } 
 
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }

<ul> 
 
<li> 
 
    <a href="#"> 
 
    Item 1 
 
    <span>Description</span> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a href="#" class="has-span"> 
 
    Item 2 
 
    <span>Description</span> 
 
    </a> 
 
</li> 
 
</ul>

Answer 2

セレクタの前に状態（:hover）を入れないでください。単一の要素が<a>など<span>することができない、ので、

ul li a:not(span):hover { color:blue; text-decoration: underline; } 

しかも、これはない動作します：だから、それを変更する必要があります。代わりに、あなただけ使用する必要があります。

span { display:block; } 
ul li a:hover { color:blue; text-decoration: underline; } 
ul li a:hover span { color:black; text-decoration: none; }