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

【问题标题】：How to change element on hover without changing span inside?如何在不更改内部跨度的情况下更改悬停元素？
【发布时间】：2016-12-13 16:33:39
【问题描述】：

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

我尝试将 H3:hover 设置为 text-decoration: underline 并将 H3:hover span 设置为 text-decoration: none 但它仍然在 span 下划线。

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>

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

【问题讨论】：

只需将您想要在特定范围内设置样式的内部文本包装起来
为什么h3里面有一个span？为此使用 h3:after。
它没有强调跨度。你的 span 没有包裹任何东西，所以你没有看到效果。
Lain: 仍然 - 如何用 ::after 解决它？ :hover 仍然对 ::after 内容有影响

标签： html css

【解决方案1】：

只需将内部文本包装在一个跨度中并给它一个类。

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>

【讨论】：

【解决方案2】：

试试这个！！！

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>

【讨论】：

【解决方案3】：

为文本使用另一个<span>，例如：

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

然后仅在.text 上应用文本装饰。

看看下面的sn-p：

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>

希望这会有所帮助！

【讨论】：

【解决方案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 在下面的评论中指出这一点。

【讨论】：

:not(span) 实际上并没有在那里做任何事情。那只是选择一个不是跨度的h3（即任何h3）。 .content:hover h3:not(span) 等同于写.content:hover h3
@andi 好点！所以它只是通过将跨度设置为内联块来工作？
是的......虽然我不太确定它的机制是什么。
@andi 我也不确定为什么会这样。感谢您指出，答案已更新。

【解决方案5】：

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

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

【讨论】：

你试过了！重要吗？
这也不起作用。你是用真正的小提琴还是 sn-p 试过的？
谢谢安迪，我明白了现在的问题所在。他将不得不将这些单词包裹在一个跨度和悬停时的样式中。