我如何定位我懸停的元素，而不是所有的列表層次結構在css中

Question

我想顯示「圖標」當我獨立懸停在每個項目上時。問題是，只要我懸停在一個子項目上，父母也會顯示它的圖標。

.list { 
 
    width: 150px; 
 
    height: 19px; 
 
} 
 
.list >.item { 
 
    background-color: #c3c3c3; 
 
    display: block; 
 
    margin-bottom: 40px; 
 
    margin-top: 12px; 
 
    border: 1px solid black; 
 
    color: white; 
 
    height: 30px; 
 
} 
 
.list .item .content { 
 
    position: relative; 
 
    width: 100px; 
 
    float: left; 
 
    display: block; 
 
} 
 
.list .item .actions { 
 
    position: relative; 
 
    color: red; 
 
    visibility: hidden; 
 
} 
 
.list .item:hover .actions { 
 
    visibility: visible; 
 
    cursor: pointer; 
 
}

<ol class="list"> 
 
    <li class="item"> 
 
    <div class="content"> 
 
     <span>1- Hi...</span> 
 
    </div> 
 
    <div class="actions"> 
 
     <span class="icon">Icon 1</span> 
 
    </div> 
 
    <ol class="list"> 
 
     <li class="item"> 
 
     <div class="content"> 
 
      <span>a- Hi 2...</span> 
 
     </div> 
 
     <div class="actions"> 
 
      <span class="icon">Icon 2</span> 
 
     </div> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li class="item"> 
 
    <div class="content"> 
 
     <span>2- Hi 3...</span> 
 
    </div> 
 
    <div class="actions"> 
 
     <span class="icon">Icon 3</span> 
 
    </div> 
 
    </li> 
 
</ol>

我如何用CSS實現這一目標？

Answer 1

您可以使用一個額外的div作爲每個項目的包裝：

.list { 
 
    width: 150px; 
 
    height: 19px; 
 
} 
 
.list >.item { 
 
    background-color: #c3c3c3; 
 
    display: block; 
 
    margin-bottom: 40px; 
 
    margin-top: 12px; 
 
    border: 1px solid black; 
 
    color: white; 
 
    height: 30px; 
 
} 
 
.list .item .content { 
 
    position: relative; 
 
    width: 100px; 
 
    float: left; 
 
    display: block; 
 
} 
 
.list .item .actions { 
 
    position: relative; 
 
    color: red; 
 
    visibility: hidden; 
 
} 
 
.list .item-wrapper:hover>.actions { 
 
    visibility: visible; 
 
    cursor: pointer; 
 
}

<ol class="list"> 
 
    <li class="item"> 
 
    <div class="item-wrapper"> 
 
     <div class="content"> 
 
     <span>1- Hi...</span> 
 
     </div> 
 
     <div class="actions"> 
 
     <span class="icon">Icon 1</span> 
 
     </div> 
 
    </div> 
 
    <ol class="list"> 
 
     <li class="item"> 
 
     <div class="item-wrapper"> 
 
      <div class="content"> 
 
      <span>a- Hi 2...</span> 
 
      </div> 
 
      <div class="actions"> 
 
      <span class="icon">Icon 2</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li class="item"> 
 
    <div class="item-wrapper"> 
 
     <div class="content"> 
 
     <span>2- Hi 3...</span> 
 
     </div> 
 
     <div class="actions"> 
 
     <span class="icon">Icon 3</span> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ol>