我正在使用jQuery的toggle效果来显示或隐藏列表元素的更多信息:
为了使它看起来可以“点击”,我正在使用CSS对.link进行样式设置:
但是,即使在每个空白处添加了text-decoration:none;,
那么我的问题(最终!)是:有没有办法在不将
可能是重复问题:
如何解决CSS文本装饰问题?
我正在使用jQuery的toggle效果来显示或隐藏列表元素的更多信息:
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对.link进行样式设置:
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;
}
但是,即使在每个空白处添加了text-decoration:none;,
<p>
在悬停时仍然被下划线(以蓝色显示)!据我所知,这是因为子样式应用在父元素之上,因此我实际上是试图将“无内容”放在下划线上并使其消失。那么我的问题(最终!)是:有没有办法在不将
<p>
移出<li>
的情况下摆脱那条下划线(但我不想这样做,因为还有其他原因)?