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

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也会影响span元素中的"阻止刺激性文本".

我只希望在悬停强调以下文本"港行2015年11月-第3天行程",我不要想了"阻止刺激性文本"当我将鼠标悬停在它出现下划线.

这可能与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