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#.

このアパートは、IDにホバーを適用しているlineため、すべてdivが影響を受けます。は、効果が必要な:hover要素「a」または「b」または「」にのみ適用する必要があります。li

スパン内のクラスのHTMLIDを置き換えるだけでこのCSSを試してください。

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 に答える