要素上にカーソルを置いてli要素を表示

Question

最初のliにカーソルを置くか、残りの要素を表示するには問題があります。それは、ulのためのホバーを設定した場合にのみ機能しますが、それはブロックレベルの要素なので、リンクの近くにカーソルを置くとli要素を表示します。

HTML：：

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
</ul> 

はCSS：

li a { 
    text-decoration: none; 
    display: none; 
} 

li:first-child a { 
    display: block; 
} 

ul:hover a { 
    display: block; 
} 

私が代わりにUL

のelemetの作業ホバーを行うことができます。これは、私が今持っているものである方法

Answer 1

もしあれば、あなたはライン（行）

ul { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
li a { 
 
    text-decoration: none; 
 
    display: none; 
 
} 
 

 
li:first-child a{ 
 
    display: inline-block; 
 
} 
 

 
li:hover ~ li a { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
</ul>

Answer 2

general sibling selector~を使用して、1番目のリスト項目のすべての兄弟を選択します。リスト項目を左に浮かべて（要素の幅は内容の幅）、ブロックレベル100％の問題を回避し、フロートをクリアして線を壊すことができます。

li a { 
 
    text-decoration: none; 
 
    display: none; 
 
} 
 

 
li { 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
li:first-child a { 
 
    display: block; 
 
} 
 

 
li:first-child:hover~li a { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
</ul>