有什么方法可以阻止 CSS :hover text-decoration underline on child 吗？

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>

为了使其看起来“可点击”，我使用 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;在每一个自由空间！据我了解，这是因为子样式应用在父样式之上，所以我实际上所做的就是尝试在下划线之上放置“任何内容”并使其消失。

所以我的问题（最终！）是这样的：有没有什么方法可以去掉下划线，而无需将

从

中取出（其中由于其他原因我不想这样做）？

Answer 1

你能控制标记吗？我会将文本包装在

中的 中，并编写 CSS 以仅使用 text 来定位跨度-装饰：下划线；。

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