Html 鼠标悬停事件的意外副作用

我想在鼠标悬停事件中更改文本。我已经找到了一个关于stackoverflow的有效解决方案。此解决方案的分数将被扣除

然而，在我的情况下，我有一个完整的链接部分，我想实现这个解决方案，但我遇到了一个不希望的副作用。当我将鼠标悬停在mouseover事件中要替换的文本上时，它会同时影响所有链接，而不仅仅是我正在悬停的链接。我希望鼠标悬停效果只对我用鼠标悬停的链接起作用。不幸的是，所有链接都在同一个

ul li

中，因此我不确定解决方案是否是在每个

之间反复打开和关闭

下面是我从中使用的css片段

我的html中的部分是：

      <div id="line1">
         <ul>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
          </ul> 










首先，在共享id的范围内，因此在那里和CSS中更改
类的
id
，而不是使用
使用类标记

显然，您正在将悬停应用于id
行
，因此所有的
div
都会受到影响。
：悬停
应仅应用于需要效果的元素“
a
”或“
b
”或“
li
”

尝试此CSS，仅替换跨中类的HTML id：

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

li:hover span.a{
 display: none;
}

li:hover span.b{
 display: inline;
}

演示：
首先，在共享id的范围内，更改
类的
id
，并在CSS中使用类标记

显然，您正在将悬停应用于id
行
，因此所有的
div
都会受到影响。
：悬停
应仅应用于需要效果的元素“
a
”或“
b
”或“
li
”

尝试此CSS，仅替换跨中类的HTML id：

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

li:hover span.a{
 display: none;
}

li:hover span.b{
 display: inline;
}

演示：
这个怎么样

在您的加价中有一些调整：

HTML:

<div>
    <ul>
        <li id="line1"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line2"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line3"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line4"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line5"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

#line1 span.a, 
#line2 span.a,
#line3 span.a
#line4 span.a
#line5 span.a {
    display:inline;
}

#line1:hover span.a,
#line2:hover span.a,
#line3:hover span.a,
#line4:hover span.a,
#line5:hover span.a {
    display:none;
}

#line1 span.b,
#line2 span.b, 
#line3 span.b, 
#line4 span.b, 
#line5 span.b {
    display:none;
}

#line1:hover span.b,
#line2:hover span.b,
#line3:hover span.b,
#line4:hover span.b,
#line5:hover span.b {
    display:inline;
}​

这个怎么样

在您的加价中有一些调整：

HTML:

<div>
    <ul>
        <li id="line1"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line2"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line3"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line4"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line5"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

#line1 span.a, 
#line2 span.a,
#line3 span.a
#line4 span.a
#line5 span.a {
    display:inline;
}

#line1:hover span.a,
#line2:hover span.a,
#line3:hover span.a,
#line4:hover span.a,
#line5:hover span.a {
    display:none;
}

#line1 span.b,
#line2 span.b, 
#line3 span.b, 
#line4 span.b, 
#line5 span.b {
    display:none;
}

#line1:hover span.b,
#line2:hover span.b,
#line3:hover span.b,
#line4:hover span.b,
#line5:hover span.b {
    display:inline;
}​

@比利·莫特：：p没问题，下次。ID太多，不是真的需要。@Nuxy：这是一个纯CSS解决方案，使用javascript/jQuery可以避免这种情况。如果你有更好的答案，请分享我们的知识。@A.K:看看我的答案，它达到了相同的结果，但没有使用多个ID。仅使用元素li的选择器是不够的。没有必要为每一个都使用一个ID。@Nuxy-我一定错过了什么。请提供一个提琴，展示一种只使用CSS而不使用多个ID的方法。@Billy Moat:：p下次没问题。ID太多，不是真的需要。@Nuxy：这是一个纯CSS解决方案，使用javascript/jQuery可以避免这种情况。如果你有更好的答案，请分享我们的知识。@A.K:看看我的答案，它达到了相同的结果，但没有使用多个ID。仅使用元素li的选择器是不够的。没有必要为每一个都使用一个ID。@Nuxy-我一定错过了什么。请提供一个提琴，展示一种只使用CSS而不使用多个ID的方法。这肯定会同时影响所有跨度，而不是将其视为单个跨度？@Billy Moat:演示就在这里。我喜欢这个解决方案。非常感谢您在这里的见解。我想我今天学到了关于“身份”与“阶级”的宝贵一课。我将使用此解决方案解决我的问题。谢谢。这肯定会同时影响所有跨度，而不是将其视为单独的跨度吗？@Billy Moat:这就是演示。我喜欢这个解决方案。非常感谢您在这里的见解。我想我今天学到了关于“身份”与“阶级”的宝贵一课。我将使用此解决方案解决我的问题。非常感谢。