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

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

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

h3跨度{
颜色：#6767；
左侧填充：10px；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3{
文字装饰：下划线；
光标：指针；
}
.内容：悬停h3跨度{
左侧填充：20px；
文字装饰：无；
}

一些H3标题>

只需将内部文本包装在一个span中，并给它一个类

h3跨度{
颜色：#6767；
左侧填充：10px；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3 span.text{
文字装饰：下划线；
光标：指针；
}
.内容：悬停h3 span.箭头{
左侧填充：20px；
}

一些H3标题>

只需将内部文本包装在一个span中，并给它一个类

h3跨度{
颜色：#6767；
左侧填充：10px；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3 span.text{
文字装饰：下划线；
光标：指针；
}
.内容：悬停h3 span.箭头{
左侧填充：20px；
}

一些H3标题>

在您的情况下，可以专门设置跨距的样式，使其不带有下划线：

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

---

在您的情况下，您可以专门设置跨距的样式，使其不具有下划线：

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

对文本使用另一个

，如：

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

一些H3标题>

对文本使用另一个

，如：

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

一些H3标题>

试试这个

h3跨度{
颜色：#6767；
左侧填充：10px；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3{
文字装饰：下划线；
光标：指针；
}
.内容：悬停h3跨度{
左侧填充：20px；
文字装饰：无；
显示：内联块；
}

一些H3标题>

试试这个

h3跨度{
颜色：#6767；
左侧填充：10px；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3{
文字装饰：下划线；
光标：指针；
}
.内容：悬停h3跨度{
左侧填充：20px；
文字装饰：无；
显示：内联块；
}

一些H3标题>

答案更新

您可以将span元素设置为

display:inline block

，它将不会产生悬停效果

像这样：

h3跨度{
颜色：#6767；
左侧填充：10px；
显示：内联块；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3{
文字装饰：下划线；
光标：指针；
}
.内容：悬停范围{
左侧填充：20px；
}

一些H3标题>

答案更新

您可以将span元素设置为

display:inline block

，它将不会产生悬停效果

像这样：

h3跨度{
颜色：#6767；
左侧填充：10px；
显示：内联块；
}
h3{
字体：22px/26px Arial，Helvetica，无衬线；
颜色：#ee0000；
利润率：10px0；
}
.内容：悬停h3{
文字装饰：下划线；
光标：指针；
}
.内容：悬停范围{
左侧填充：20px；
}

一些H3标题>

只需将您想要设置为特定跨距样式的内部文本包装起来，为什么h3中首先会有跨距？使用h3：之后。它不是在跨度下面。你的span没有包装任何东西，所以你没有看到效果。莱恩：仍然-如何用：：after解决它？：hover仍然会对：：after内容有影响，只需将您希望设置为特定跨距的内部文本包装起来为什么h3中首先会有跨距？使用h3：之后。它不是在跨度下面。你的span没有包装任何东西，所以你没有看到效果。莱恩：仍然-如何用：：after解决它？：悬停仍然会影响：：after内容。您尝试了吗！重要吗？那也不行。你真的试过了吗？谢谢，安迪，我知道问题出在哪里了。他将不得不用一个空格来包装这些单词，并用悬停的方式。你试过了吗！重要吗？那也不行。你真的试过了吗？谢谢，安迪，我知道问题出在哪里了。他将不得不用一个span和一个悬停的样式来包装这些单词。

：not（span）

实际上在那里没有任何作用。它只选择了一个不是跨度的h3（即任何h3）

.content:hover h3:not（span）

与写入

相同。content:hover h3

@andi很好！所以只需将跨度设置为内联块就可以了？是的。。。虽然我不太清楚这是什么机制，@andi我也不知道为什么会起作用。感谢您指出，答案已更新。

：not（span）

在这里实际上没有任何作用。它只选择了一个不是跨度的h3（即任何h3）

.content:hover h3:not（span）

与写入

相同。content:hover h3

@andi很好！所以只需将跨度设置为内联块就可以了？是的。。。虽然我不太清楚这是什么机制，@andi我也不知道为什么会起作用。谢谢你指出，答案更新了。