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

Question

我有简单的 html 代码，我想更改 :hover 上的 h3 标记，但不影响其中的跨度。

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

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

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

Answer 1

只需将内部文本包裹在一个 span 中并为其指定一个类。

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

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