如何在不改变内部跨度的情况下更改悬停元素？

Question

我有简单的html代码，我想更改h3标签：悬停但对其内部的跨度没有任何影响。

我尝试设置H3：hover to text-decoration：underline和H3：hover span to text-decoration：none，但它仍然强调了跨度。

＆＃13;

＆＃13;

h3 span {
    color: #676767;
    padding-left: 10px;
}

h3 {
    font: 22px/26px Arial, Helvetica, sans-serif;
    color: #ee0000;
    margin: 10px 0;
}

.content:hover h3 {
    text-decoration: underline;
    cursor: pointer;
}

.content:hover h3 span {
    padding-left: 20px;
    text-decoration: none;
}

＆＃13;

<div class="content">
  <h3>Some H3 title<span class='arrow'>></span></h3>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么以及最好的方式是什么？

Answer 1

只需将内部文本包装在一个范围内，然后给它一个类。

＆＃13;

＆＃13;

h3 span {
    color: #676767;
    padding-left: 10px;
}

h3 {
    font: 22px/26px Arial, Helvetica, sans-serif;
    color: #ee0000;
    margin: 10px 0;
}

.content:hover h3 span.text {
    text-decoration: underline;
    cursor: pointer;
}

.content:hover h3 span.arrow {
    padding-left: 20px;
}

＆＃13;

<div class="content">
  <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用其他<span>作为文字，例如：

<div class="content">
  <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3>
</div>

然后仅在.text上应用文字修饰。

请看下面的代码段：

h3 .arrow {
  color: #676767;
  padding-left: 10px;
}

h3 .text {
  font: 22px/26px Arial, Helvetica, sans-serif;
  color: #ee0000;
  margin: 10px 0;
}

h3 .text {
  color: red;
}

.content h3 {
  cursor: pointer;
}

.content:hover h3 .text {
  text-decoration: underline;
  cursor: pointer;
}

.content:hover h3 .arrow {
  padding-left: 20px;
  text-decoration: none;
}

<div class="content">
  <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3>
</div>

希望这有帮助！

Answer 3

试试这个!!!

h3 span {
    color: #676767;
    padding-left: 10px;
}

h3 {
    font: 22px/26px Arial, Helvetica, sans-serif;
    color: #ee0000;
    margin: 10px 0;
}

.content:hover h3 {
    text-decoration: underline;
    cursor: pointer;
}

.content:hover h3 span {
    padding-left: 20px;
    text-decoration: none;
    display:inline-block;
}

<div class="content"> 
  <h3>Some H3 title<span class='arrow'>></span></h3> 
</div>

Answer 4

回答更新

您可以将span元素设置为display: inline-block，并且不会占用悬停效果。

像这样：

h3 span {
    color: #676767;
    padding-left: 10px;
    display: inline-block;
}

h3 {
    font: 22px/26px Arial, Helvetica, sans-serif;
    color: #ee0000;
    margin: 10px 0;
}

.content:hover h3{
    text-decoration: underline;
    cursor: pointer;
}

.content:hover span {
    padding-left: 20px;
}

<div class="content">
  <h3>Some H3 title<span class="arrow">></span></h3>
</div>

感谢andi在下面的评论中指出这一点。

Answer 5

在您的情况下，您可以专门设置跨度样式以永远不会有下划线：

h3 span { 
    text-decoration:none !important;
}