有没有办法阻止CSS :hover在子元素上添加文本下划线？

Question

我正在使用jQuery的toggle效果来显示或隐藏列表元素的更多信息：

可能是重复问题：
如何解决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>的情况下摆脱那条下划线（但我不想这样做，因为还有其他原因）？

- Mike

---

谢谢提供链接 - 我之前没看过这个。 - Mike

Answer 1

你能控制标记吗？我会将文本包裹在<li/>中的<span/>中，并编写CSS，以仅针对具有text-decoration:underline;的span。但是，可点击区域应该是一个href为“＃”的<a/>元素。绑定单击处理程序到锚点而不是li。然后，您可以使用更多伪选择器，如a：visited，并且单击它的行为已记录。我不确定p:hover是否实际上应该在CSS中工作。我知道可以使用jQuery绑定到任何元素，但使用CSS，我会坚持使用锚点元素。

- Andy Atkinson

---

谢谢，我没有使用锚点，因为非JavaScript降级版本会显示所有内容，所以没有链接。我认为 span 选项可能是最好的选择。 - Mike