挂起列表时悬停的CSS

时间：2016-07-09 13:05:12

标签： html css nested-lists

我有嵌套列表，当鼠标超过某个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="p-l-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类进行“on click”事件，因为在生产中它将是一个按钮。

1 个答案:

答案 0 :(得分：0)

如果您需要纯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="p-l-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>

相关问题
最新问题