Question

可能重复：
How do I get this CSS text-decoration issue to work?

我正在使用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/>中的文本包装在<span/>中并编写CSS以仅使用text-decoration:underline;来定位范围。

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

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

1 个答案: