將鼠標懸停在CSS上以獲取嵌套列表

Question

我有嵌套的列表，當鼠標懸停在某個li上時，我想在其中顯示圖標。 不幸的是，由於列表是嵌套的，所以如果將鼠標懸停在任何子li上，則父li也將獲得懸停效果。 我只想為鼠標懸停的LI而不是其父母的LI懸停效果。

 $(".cl-tmp-tsk").append('<span class="cw-icon"><i class="glyphicon glyphicon-plus"></i></span>'); 

 .cw-icon { position: absolute; right: 75%; top: 0; display: none; } .cl-tmp-tsk:hover > .cw-icon { display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="checklistTree" class="pl-15"> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0" /><i class="input-helper"></i> <label for="chk_0"><b>aaa</b> <br/>bbb</label> <ul> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_0" /><i class="input-helper"></i> <label for="chk_0_0"><b>ccc</b> <br/>ddd</label> </li> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1" /><i class="input-helper"></i> <label for="chk_0_1"><b>eee</b> <br/>fff</label> <ul> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1_0" /><i class="input-helper"></i> <label for="chk_0_1_0"><b>ggg</b> <br/>hhh</label> </li> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1_1" /><i class="input-helper"></i> <label for="chk_0_1_1"><b>iii</b> <br/>jjj</label> <ul> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1_1_0" /><i class="input-helper"></i> <label for="chk_0_1_1_0"><b>kkk</b> <br/>sss</label> <ul> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1_1_0_0" /><i class="input-helper"></i> <label for="chk_0_1_1_0_0"><b>qqq</b> <br/>ppp</label> </li> </ul> </ul> </li> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_1_2" /><i class="input-helper"></i> <label for="chk_0_1_2"><b>111</b> <br/>fff</label> </li> </ul> </li> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_0_2" /><i class="input-helper"></i> <label for="chk_0_2"><b>222</b> <br/> </label> </li> </ul> </li> <li class="checkbox cl-tmp-tsk"> <input type="checkbox" id="chk_1" /><i class="input-helper"></i> <label for="chk_1"><b>333</b> <br/> </label> </li> </ul> 

由於提供的代碼是更復雜的頁面的一部分，因此應避免更改html結構。 另外，我需要能夠對cw-icon類進行“單擊”事件，因為在生產中這將是一個按鈕。

Answer 1

如果需要純CSS解決方案，則可以將每個li的內容包裝在<div>或<span>或另一個包裝元素中，然后將其定位。 見下文。

 $(".icon-wrap").append('<span class="cw-icon"><i class="glyphicon glyphicon-plus"></i></span>'); 

 .cw-icon { position: absolute; right: 75%; top: 0; display: none; } .icon-wrap:hover > .cw-icon { display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="checklistTree" class="pl-15"> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0" /><i class="input-helper"></i> <label for="chk_0"><b>aaa</b> <br/>bbb</label> </div> <ul> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_0" /><i class="input-helper"></i> <label for="chk_0_0"><b>ccc</b> <br/>ddd</label> </div> </li> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1" /><i class="input-helper"></i> <label for="chk_0_1"><b>eee</b> <br/>fff</label> </div> <ul> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1_0" /><i class="input-helper"></i> <label for="chk_0_1_0"><b>ggg</b> <br/>hhh</label> </div> </li> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1_1" /><i class="input-helper"></i> <label for="chk_0_1_1"><b>iii</b> <br/>jjj</label> </div> <ul> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1_1_0" /><i class="input-helper"></i> <label for="chk_0_1_1_0"><b>kkk</b> <br/>sss</label> </div> <ul> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1_1_0_0" /><i class="input-helper"></i> <label for="chk_0_1_1_0_0"><b>qqq</b> <br/>ppp</label> </div> </li> </ul> </ul> </li> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_1_2" /><i class="input-helper"></i> <label for="chk_0_1_2"><b>111</b> <br/>fff</label> </div> </li> </ul> </li> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_0_2" /><i class="input-helper"></i> <label for="chk_0_2"><b>222</b> <br/> </label> </div> </li> </ul> </li> <li class="checkbox cl-tmp-tsk"> <div class="icon-wrap"> <input type="checkbox" id="chk_1" /><i class="input-helper"></i> <label for="chk_1"><b>333</b> <br/> </label> </div> </li> </ul>