Question

我想在mouseover事件中更改文本。我在stackoverflow上找到了一个可以找到的工作解决方案here。积分向Mark提出此解决方案。

然而，在我的情况下，我有一整段链接，我想实现这个解决方案，但我遇到了不希望的副作用。当我将鼠标悬停在我希望在鼠标悬停事件上替换的文本上时，它会同时影响所有链接，而不仅仅是我正在悬停的链接。我希望鼠标悬停效果仅适用于我用鼠标悬停的链接。不幸的是，所有链接都在同一个ul li内，因此我不确定是否可以一次又一次地在每个<div>之间打开和关闭<li> </li>。

以下是我在Mark

中使用的css代码段

div#line1 span#a {
    display:inline;
}
div#line1:hover span#a {
    display:none;
}
div#line1 span#b {
    display:none;
}
div#line1:hover span#b {
    display:inline;
}

我的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>

Answer 1

首先，在您拥有共享ID的范围内，因此更改id class并在CSS中而不是使用#使用类标记. < / p>

请注意，您将悬停应用于ID line，因此所有div都会受到影响。 :hover应仅适用于元素“a”或“b”或需要效果的“li”。

尝试使用此CSS只需替换span中的类的HTML id：

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

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

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

DEMO： http://jsfiddle.net/Kn7YY/1/

Answer 2

这个solution

怎么样？

标记中的一些调整：

<强> 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>

<强> CSS：

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

鼠标悬停事件导致不良副作用

2 个答案: