使用：在嵌套列表中懸停僞類

我試圖獲得當它們被徘徊時將某些額外值添加到列表項中的效果。我非常接近，但是在使用嵌套列表時，父母認爲它和孩子一樣都是懸停的。使用：在嵌套列表中懸停僞類

這是我的簡單測試用例。期望的結果是，每個項目將顯示跨度，並且僅當它被徘徊時。將鼠標懸停在「測試5.3」上不應導致顯示「跨度」的「測試5」。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Testing list :)</title> 
<style type="text/css"> 
li span { 
    visibility: hidden; 
} 
li:hover > span { 
    visibility: visible; 
} 
</style> 
</head> 

<body> 
<ul> 
    <li>Test 1<span> - Edit</span></li> 
    <li>Test 2<span> - Edit</span></li> 
    <li>Test 3<span> - Edit</span></li> 
    <li>Test 4<span> - Edit</span></li> 
    <li>Test 5<span> - Edit</span> 
     <ul> 
      <li>Test 5.1<span> - Edit</span></li> 
      <li>Test 5.2<span> - Edit</span></li> 
      <li>Test 5.3<span> - Edit</span></li> 
      <li>Test 5.4<span> - Edit</span></li> 
      <li>Test 5.5<span> - Edit</span></li> 
     </ul> 
    </li> 
    <li>Test 6<span> - Edit</span></li> 
    <li>Test 7<span> - Edit</span></li> 
    <li>Test 8<span> - Edit</span></li> 
    <li>Test 9<span> - Edit</span></li> 
</ul> 
</body> 
</html>

鏈接到在線版本，以節省您複製了上面：test.html

感謝

來源

2011-06-21 Matt

如果最大深度未知，我不確定這對於CSS是否可行。我希望有人（甚至是我自己）能證明我錯了。 – thirtydot

那麼......任何瀏覽器兼容性要求？（我沒有解決辦法，我只是想知道。）@thirtydot：我也希望如此。 – BoltClock

@thirtydot，我也希望如此。事實上，我知道最大的深度，但我希望我不需要訴諸於此，因爲它是兩位數字。 – Matt

參見：http://jsbin.com/ihole5/3/

我被騙了，改變你的HTML，來自：

<li>Test 1<span> - Edit</span></li>

包括一個額外的包裝span：（這已經巧妙地從我原來的答覆改變）

<li><span>Test 1<span> - Edit</span></span></li>

這次CSS很簡單：

li > span > span { 
    visibility: hidden; 
} 
li > span:hover > span { 
    visibility: visible; 
}

來源

2011-06-21 18:58:31 thirtydot

那麼，光標無法達到懸停時出現的'span'而不會離開另一個'span'並使其消失。我認爲「編輯」應該是可點擊的。 – BoltClock

太棒了。由於上面的例子過於簡單，實際上這個跨度有一個類，所以我不需要：最後一個類型。此外，您已添加新跨度的元素，因此效果也很好。 – Matt

@BoltClock：糟糕！我正在修理它。 – thirtydot

你有一個關於如何誤解：懸停作品。它也適用於元素的所有父母 - 即，您不能將鼠標懸停在內部li上，也不會將鼠標懸停在其父母ul上，也不能將父母li,ul，一直高達body。

來源

2011-06-21 18:43:46 searlea

我明白:)即使我沒有，這就是我所看到並希望避免的行爲。我不是問「我做錯了什麼？」或者「爲什麼不：像我期望的那樣工作？」，我問「有什麼解決方法？」 – Matt

使用：在嵌套列表中懸停僞類

回答

相關問題