任何方式来停止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我会坚持使用锚元素。