5

可能重复：
如何让这个 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;
}

但是<p>在悬停时仍然有下划线（蓝色），尽管抛出了 text-decoration:none; 在每一个自由空间！据我了解，这是因为子样式应用在父样式之上，所以我实际上正在做的是试图将“无”放在下划线之上并让它消失。

所以我的问题（最终！）是这样的：有没有办法摆脱那个下划线而不去掉（<p>出于<li>其他原因我不想这样做）？

4

1 回答 1

5

你能控制标记吗？我会将文本包装<li/>在 a 中<span/>，并编写 CSS 以仅针对具有text-decoration:underline;.

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

于 2010-10-06T04:04:02.470 回答