3

私は次のhtmlを持っています:

<li>
<span class="one">Stuff here</span>
<span class="two">More stuff</span>
</li>

.one { display: block; }
.two { display: none; }

マウスがコンテナ上に移動したときに非表示oneおよび表示する最も簡単な方法、できれば CSS のみは何ですか。two<li>

これが CSS ではなく Javascript のみで実行できない場合はlive()、コンテンツがライブで更新され、常に手動で再バインドしたくないなどの方法で jQuery を使用することをお勧めします。

編集: これはIE6で動作する必要があることを忘れていました:/

4

5 に答える 5

11

CSS のみ:

.one { display: block; }
.two { display: none; }

li:hover .one
{
    display: none;
}
li:hover .two
{
    display: block;
}
于 2010-05-11T08:57:29.603 に答える
6 
 $('ul').delegate('li', 'mouseenter', function(){
     $('.one').hide();
     $('.two').show();
 })
 .delegate('li', 'mouseleave', function(){
     $('.one').show();
     $('.two').hide();
 });
于 2010-05-11T08:59:04.643 に答える
2

完全にテストされていないため、fadeIn() と fadeOut() を使用するか、より良いクラスを使用することをお勧めします (両方のスパンに同じクラスが必要ですが、ID は異なります)。これを行うための jQuery サンプルを次に示します。

$(document).ready( function(){
  $("li span")
     .mouseOver( function(){ $(this).hide() )
     .mouseOut( function(){ $(this).show() )
});
于 2010-05-11T08:56:13.370 に答える
2

サポートしたいブラウザーに応じて、これは次の方法で実現できます。

li .one { display: block; }
li:hover .one { display: none; }
li .two { display: none; }
li:hover .two { display: block; }
于 2010-05-11T08:57:07.267 に答える
0 
<li>
 <span class="one">Stuff here</span>
 <span class="two">More stuff</span>
</li>​

その後のjs部分

<script type="text/javascript">

 sfHover = function() {
  var sfEls = document.getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
   }
   sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
   }
  }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

最後にcss部分

.one { display: block; }
.two { display: none; }

li:hover .one, li.sfhover .one { display:none;}
li:hover .two, li.sfhover .two { display:block;}​

未確認ですが、試してみてください

于 2010-05-11T08:58:58.217 に答える