任何阻止CSS的方法:将孩子的悬停文字装饰下划线？

Question

可能重复:
如何使CSS文本修饰问题起作用？

我正在使用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>

为了使它看起来"可点击"我是造型.link与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/>a中<span/>，并编写 CSS 以仅针对带有 的跨度text-decoration:underline;。

事实上，可点击区域应该是一个<a/>href 为“#”的元素。将点击处理程序绑定到锚点而不是 li。然后，您可以使用更多伪选择器，例如 a:visited ，并且记录了单击它的行为。我不确定是否p:hover真的应该在 CSS 中工作。我知道可以使用 jQuery 绑定到任何元素，但使用 CSS 我会坚持使用锚元素。