如何突出顯示父李文本：hover？

如何突出文章只在鼠標懸停？目前，當我徘徊在文章上時，它也突出了所有兒童項目。是否有可能以突出文章僅如何突出顯示父李文本：hover？

<style> 
    li:hover {background:red} 
li li:hover {background:yellow} 
</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
    <ul> 
<li>Weblog</li> 
<li>Articles 
    <ul> 
    <li>How to Beat the Red Sox</li> 
    <li>Pitching Past the 7th Inning 
     <ul> 
     <li>Part I</li> 
     <li>Part II</li> 
     </ul> 
    </li> 
    <li>Eighty-Five Years Isn't All That Long, Really</li> 
    </ul> 
</li> 
<li>About</li> 
</ul>

來源

2010-05-21 Jitendra Vyas

對不起，波士頓這裏。當你提到擊敗紅襪時，你失去了我。 – Robusto 2010-05-21 16:39:16

@Robusto - 你是什麼意思？ – 2010-05-21 16:46:27

gear-solid：開個玩笑吧。但是我們在Red Sox Nation非常重視贏球和輸球。 – Robusto 2010-05-21 17:12:22

如果你想只強調「文章」，當鼠標移動到這個詞，那麼你就需要編輯HTML添加一些<span>標籤或周圍的每個單詞類似的東西：

<style> 
    li span:hover {background:red} 
    li li span:hover {background:yellow} 
</style> 
</head> 

<body> 
    <p id="hello">Hello World</p> 
    <ul> 
     <li><span>Weblog</span></li> 
     <li><span>Articles</span> 
     <ul> 
     ...etc

編輯：這看起來像一個菜單 - 在這種情況下，您將使用鏈接，因此您可以定位這些菜單而不是使用跨度。

來源

2010-05-21 16:54:33 DisgruntledGoat

你可能會需要惹一些在不同瀏覽器的定位的，但你可以添加以下到您的樣式：

li:hover ul { background: white; } 
li:hover ul li:hover { background: yellow; }

用所需的任何十六進制，rgb或顏色值替換「white」。

來源

2010-05-21 16:37:28 TheQ

+1是個好主意。但是在那裏，li li：hover會顯示，直到我的moues在ul裏面的子項目上。但我認爲這是在CSS中的最後可能的方式。 – 2010-05-21 16:40:57

看我的編輯，這有幫助嗎？ – TheQ 2010-05-21 16:43:00

不，我的意思是我一次只想強調一個項目。 – 2010-05-21 16:45:21

如何突出顯示父李文本：hover？

回答

相關問題