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

2022-01-22 00:00:00 parent-child hover css text-decorations

可能重复:
如何获得这个 CSS 文本装饰问题上班吗?

我正在使用 jquery 切换效果来显示或隐藏有关列表元素的更多信息:

I'm using the jquery toggle effect to show or hide more information about list elements:

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 样式:

In order to make it look 'clickable' I'm styling .link with css:

ul li.link {
    color: #0066AA;
}

ul li.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

但我不希望显示的文本看起来像一个链接:

But I don't want the text that's revealed to look like a link so:

ul li.link p{
    color: black;
    text-decoration: none;
}

ul li.link p:hover {
    cursor: text;
    text-decoration: none;
}

但是 <p> 在悬停时仍然带有下划线(蓝色)，尽管抛出了 text-decoration:none;在每一个自由空间！据我了解，这是因为子样式应用在父样式之上，所以我实际上正在尝试将无"放在下划线之上并使其消失.

But the <p> is still underlined (in blue) on hover, despite throwing text-decoration:none; in every free space! From what I understand this is because the child styles are applied on top of the parent so what I'm effectively doing is trying to put 'nothing' on top of an underline and have it disappear.

所以我的问题(最终！)是这样的:有没有什么办法可以去掉那个下划线而不把 <p> 从 <li>(出于其他原因我不想这样做)?

So my question (eventually!) is this: Is there any way to get rid of that underline without taking the <p> out of the <li> (which I don't want to do for other reasons)?

推荐答案

你能控制标记吗?我将 <li/> 内的文本包装在 <span/> 中，并编写 CSS 以仅使用 text 定位范围-装饰:下划线；.

Can you control the markup? I'd wrap the text inside the <li/> in a <span/> and write the CSS to target just the span with text-decoration:underline;.

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

Really though the clickable area should be an <a/> element with an href of "#". Bind a click handler to the anchor instead of the li. Then you have more pseudo-selectors like a:visited to work with and the behavior of clicking it is documented. I'm not sure if p:hover is actually supposed to work in CSS. I know it is possible to bind to any element with jQuery, but with CSS I'd stick with an anchor element.

相关文章