任何方式來停止CSS：懸停文字裝飾下劃線的孩子？

Question

可能重複：
How do I get this CSS text-decoration issue to work?

我使用jQuery的切換效果，以顯示或隱藏有關列表元素的更多信息：

jQuery(document).ready(function($) { 
    $("ul p").hide(); 
    $("ul li").addClass("link"); 
    $("ul li").click(function() { 
    $("p", this).toggle(300); 
    }); 
}); 

，其與正常工作結構如：

<ul> 
<li>List element 1<p>Additional info 1</p></li> 
<li>List element 2<p>Additional info 2</p></li> 
</ul> 

爲了使它看起來「可點擊」我的造型。鏈接使用CSS：

ul li.link { 
    color: #0066AA; 
} 

ul li.link:hover { 
    text-decoration: underline; 
    cursor: pointer; 
} 

但我不希望這樣啓示的，看起來像一個鏈接，這樣的文字：

ul li.link p{ 
    color: black; 
    text-decoration: none; 
} 

ul li.link p:hover { 
    cursor: text; 
    text-decoration: none; 
} 

但是<p>在懸停時仍然用下劃線標出（藍色），儘管扔文字修飾：無;在每一個免費空間！根據我的理解，這是因爲孩子的風格是應用在父母之上的，所以我實際上做的是試圖在下劃線之上放置「無」，並讓它消失。

所以我的問題（最終！）是這樣的：有沒有辦法擺脫下劃線，而不是<p>出<li>（我不想做其他原因）？

Answer 1

你可以控制標記嗎？我會將<li/>中的文本換成<span/>，然後編寫CSS來將目標定位爲text-decoration:underline;。

真的，儘管可點擊區域應該是帶有「＃」href的<a/>元素。將點擊處理程序綁定到錨而不是li。然後你有更多的僞選擇器，比如a：visited來處理，點擊它的行爲被記錄下來。我不確定p:hover實際上是否應該在CSS中工作。我知道可以使用jQuery綁定到任何元素，但使用CSS我會堅持使用錨元素。