如何保持懸停效果只對父

我正在開發一個CSS樹視圖，我想，如果有可能，只保留有子女的元素有關的懸停效果：如何保持懸停效果只對父

<ul> 
     <li><span>Item 1</span> 
     <ul> 
      <li><span>Item 1.1</span></li> 
      <li><span>Item 1.2</span></li> 
      <li><span>Item 1.3</span></li> 
     </ul> 
     </li> 
    </ul>

我已完成在CSS是：

.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span { 
    background:#eee; 
    border:1px solid #94a0b4; 
    color:#000 
}

但這並不像我預期的那樣工作。

來源

2013-10-23 Juan Jardim

究竟是什麼元素，你試圖應用懸停呢？只是項目1跨度？ – Kierchon

'ul'不是'span'的'li'的孩子。 –

@Kierchon在這種情況下，只有項目1.但是，如果項目1.1有一個孩子（項目1.1.1）我也想要項目1.1被突出顯示 –

你想要的：hover只裏面的「項目1」物權效力？

.treeview > ul > li:hover > span { 
    color: red; 
}

另請檢查this Fiddle。

更新時間（根據您的評論）

.treeview li:hover > span { 
    color: red; 
}

而且updated Fiddle。然而，這也將觸發「項目1.1.1」時，徘徊的跨度...

來源

2013-10-23 14:53:23 LinkinTED

這就是你想要的嗎？

http://jsfiddle.net/Defoncesko/p63b9/

HTML

<div class="treeview"> 
     <ul> 
      <li><span>Item 1</span> 
      <ul> 
       <li><span>Item 1.1</span></li> 
       <li><span>Item 1.2</span></li> 
       <li><span>Item 1.3</span></li> 
      </ul> 
      </li> 
     </ul> 
</div>

CSS

ul ul li:hover { 
     background-color:#eee; 
     border:1px solid #94a0b4; 
     color:#000 
    }

來源

2013-10-23 14:49:45 Defoncesko

我認爲這是你想要的。我在我的小提琴中加了另一個更大的李，所以你可以看到。

.treeview ul>li>span:hover { 
    background:#eee; 
    border:1px solid #94a0b4; 
    color:#000 
} 
.treeview ul>li>span ~ ul>li>span:hover { 
    background:#fff; 
    border:none; 
    color:#000 
}

演示：http://jsfiddle.net/QdEEf/1/

編輯：其實，如果im真正瞭解你的問題。您正在尋找一種方法來確定li是否有一個ul作爲一個孩子，然後給這個li懸停，如果它。如果是這種情況，你將需要使用JavaScript來確定它是否有一個ul孩子。有沒有辦法做到這一點與CSS

來源

2013-10-23 14:59:29 Kierchon

如何保持懸停效果只對父

回答

相關問題