CSS - 複数のアイテムがホバー状態の子を表示する

Question

以下のコードを、リストアイテムとそれぞれの隣にある削除リンクを考慮して検討してください。私はそれを持っているので、ホバリングされたリンク項目だけがそれらのすべてではなく、削除ボタンを表示します。問題のデモについては、以下を参照してください：

.todo-list { 
 
    list-style-type: square; 
 
} 
 

 
.todo-list__delete { 
 
    display: none; 
 
} 
 

 
.todo-list:hover .todo-list__delete { 
 
    display: inline-block; 
 
}

<ul class="todo-list"> 
 
    <li> 
 
     Item 1 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 2 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 3 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    </ul>

は、単純な問題のように思えるが、何をCSSでアクティブなホバー要素をターゲットするための最良の方法だろうか？

Answer 1

この方法はありますか？

.todo-list { 
 
    list-style-type: square; 
 
} 
 

 
.todo-list__delete { 
 
    display: none; 
 
} 
 

 
li:hover .todo-list__delete { 
 
    display: inline-block; 
 
}

<ul class="todo-list"> 
 
    <li> 
 
     Item 1 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 2 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 3 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    </ul>

Answer 2

を.todo-listに設定する代わりに、li要素に設定してください。 li要素の上にホバーを追加

.todo-list { 
 
    list-style-type: square; 
 
} 
 

 
.todo-list__delete { 
 
    display: none; 
 
} 
 

 
li:hover .todo-list__delete { 
 
    display: inline-block; 
 
}

<ul class="todo-list"> 
 
    <li> 
 
     Item 1 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 2 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 3 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    </ul>

Answer 3

試してみてください。

.todo-list { 
    list-style-type: square; 
} 

.todo-list__delete { 
    display: none; 
} 

.todo-list li:hover .todo-list__delete { 
    display: inline-block; 
} 

デモ：http://jsfiddle.net/GCu2D/2205/

Answer 4

要素を一覧表示するには、あなたの:hoverセレクタを制限します。

Answer 5

.todo-list { 
 
    list-style-type: square; 
 
} 
 

 
.todo-list__delete { 
 
    display: none; 
 
} 
 

 
.todo-list li:hover .todo-list__delete { 
 
    display: inline-block; 
 
}

<ul class="todo-list"> 
 
    <li> 
 
     Item 1 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 2 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 3 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    </ul>

は、私はそれがこれだけホバーリンク項目は削除ボタン

あなたはちょっとそれを自分で答えを示していたいです。単に私の最後の:hover

.todo-list { 
 
    list-style-type: square; 
 
} 
 

 
.todo-list__delete { 
 
    display: none; 
 
} 
 

 
.todo-list li:hover .todo-list__delete { /* < here */ 
 
    display: inline-block; 
 
}

<ul class="todo-list"> 
 
    <li> 
 
     Item 1 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 2 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    <li> 
 
     Item 3 
 
     <a class="todo-list__delete" href="#">Delete</a> 
 
    </li> 
 
    </ul>