任何方式来停止CSS：悬停文字装饰下划线的孩子？

问题描述

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

  jQuery（document）.ready（function（$）{
 $（ul p）。hide（）; 
 $（ul li）。addClass（链接）; 
 $（ul li）。click（function（）{
 $（p，this）.toggle（300）; 
}）; 
}）; 
  

它可以很好地处理以下结构：

 < UL> 
< li>列表元素1< p>其他信息1< / p>< / li> 
< li>列表元素2< p>其他信息2< / p>< / li> 
< / ul> 
  

为了使它看起来'可点击'，我正在设计.link with css：

  ul li.link {
 color：＃0066AA; 
} 
 
 ul li.link:hover {
 text-decoration：underline; 
光标：指针; 
} 
  

但我不希望显示的文字看起来像链接：

  ul li.link p {
 color：black; 
 text-decoration：none; 
} 
 
 ul li.link p：hover {
 cursor：text; 
 text-decoration：none; 
 
  

但是< p> 在悬停时仍然用下划线标出（蓝色），尽管扔文字修饰：无;在每一个免费空间！据我所知，这是因为孩子的风格被应用在父母之上，所以我实际上正在试图在下划线之上放置'没有'，并让它消失。

所以我的问题（最终！）是这样的：有没有办法摆脱下划线而不把< p> 从< li> （其他原因，我不想这么做）？

解决方案

div>

你可以控制标记吗？我会将< li /> 中的文本包装在< span /> 中并写入CSS仅用 text-decoration：underline; 来定位跨度。

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

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);
    });
});

which works fine with a structure like:

<ul>
<li>List element 1<p>Additional info 1</p></li>
<li>List element 2<p>Additional info 2</p></li>
</ul>

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;
}

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.

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)?

解决方案

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;.

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.

这篇关于任何方式来停止CSS：悬停文字装饰下划线的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！