1

我想在鼠标悬停事件上更改我的文本。我在 stackoverflow 上找到了一个可行的解决方案，可以在这里找到。此解决方案的学分归功于 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>

4

2 回答 2

3

首先，在跨度中您有共享 ID，因此在 CSS 中进行更改id，class而不是#使用类标记.

Appart 您将悬停应用到 id line，所以所有的div都会受到影响。:hover应该只应用于需要效果的元素“ ”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;
}

演示：http: //jsfiddle.net/Kn7YY/1/

于 2012-07-24T11:01:43.657 回答
1

这个解决方案怎么样

标记中的一些调整：

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;
}​
于 2012-07-24T11:02:42.193 回答