Question

代码如下：

<h1 class="slide-title">
<span class="slider-category">
<a href="/test/test.html"> Blocking irritating text</a>
</span>
Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>

使用h1.slide-title:hover会影响＆＃34;阻止恼人的文字＆＃34;在span元素中也是如此。

我仅想强调悬停以下文字＆＃34;香港之旅2015年11月 - 第3天行程＆＃34;，我不要想要＆＃34;阻止刺激性文字＆＃34;当我将鼠标悬停在它上面时加下划线。

CSS或jQuery可以吗？

编辑：问题不重复，因为我不想编辑HTML。另外作为旁注，我希望<span>元素也可以单独悬停下划线。

Answer 1

您必须使用text-decoration稍微更改不希望受display: inline-block影响的元素：

h1.slide-title:hover {
  text-decoration: underline;
}
h1.slide-title a {
  display: inline-block;
  text-decoration: none;
}
h1.slide-title a:hover {
  text-decoration: underline;
}

<h1 class="slide-title">
  <span class="slider-category">
    <a href="/test/test.html">Blocking irritating text</a>
  </span>
  Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>

[link]请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。

因此，您还可以使用float: left或position: absolute

Answer 2

    object.ACL?.setWriteAccess(allowed: Bool, forRole: PFRole)
    object.ACL?.setWriteAccess(allowed: Bool, forRoleWithName: String)
    object.ACL?.setWriteAccess(allowed: Bool, forUser: PFUser)
    object.ACL?.setWriteAccess(allowed: Bool, forUserId: String)

请参阅小提琴：https://jsfiddle.net/cvn43ncg/1/

Answer 3

快速简便的方法是运行这样的jQuery代码。

$('.slide-title').each(function() {
  var txt = $(this).find(".slider-category").html();
  $(this).find("span").remove();
  var ex = $(this).text();
  $(this).empty();

  $(txt+"<span class='extra-txt'>"+ex+"</span>").appendTo(this);
});

添加CSS，例如

h1.slide-title:hover .extra-txt {
  text-decoration: underline;
}

h1.slide-title a {
  text-decoration: none;
}

h1.slide-title:hover a {
  text-decoration: none !important;
}

这是一个工作版本。

https://jsfiddle.net/mjtmtsa5/3/

Answer 4

试试这个：

$('h1').hover(function()
{
  $(this).contents().filter(function() {  
    return this.nodeType == 3 ? $(this).wrap('<u></u>') : null;  // nodeType == 3 returns the inner text of the target element
  });
});

示例：http://jsfiddle.net/DinoMyte/bvtngh57/151/

如何在排除子元素的元素中悬停文本下划线

4 个答案: