0

現在、以下のように画像リンクをロールオーバーするコードがあります。

<a id="show" href="#"><img src="images/show-me.png" border=0 onmouseover="this.src='images/show-me_over.png';" onmouseout="this.src='images/show-me.png'"></a>

これをクリックすると、divが表示されます

jQuery(document).ready(function(){
    jQuery("#show").toggle(
        function(){
            jQuery('#home-hidden-extra').animate({'height': '480px'} ,1000);},
        function(){
            jQuery('#home-hidden-extra').animate({'height': '0px'} ,1000);}
    );
});

私がやりたいことは、divが非表示のときにshow_me.pngとshow_me-over.pngを使用し、divが表示されているときにhide_me.pngとhide_me-over.pngを使用することです。

これを達成する最も簡単な方法は？

再度、感謝します！

4

2 に答える 2

1

静的なホバー スタイルを CSS に配置する必要があります。定義

.linkShow {
    background-image: url("images/show_me.png");
}

.linkShow:hover {
    background-image: url("images/show_me_hover.png"); 
}

.linkHide {
    background-image: url("images/hide_me.png");
}

.linkHide:hover {
    background-image: url("images/hide_me_hover.png"); 
}

次に、これらのクラスを jquery でリンクに追加します。

$("#show").removeClass().addClass("linkShow");
于 2012-07-19T20:12:59.703 に答える
0

これはうまくいくはずです：

HTML

    <a id="show" href="#">
      <img id="the-image" src="images/show-me.png" />
    </a>

JS

  $(document).ready(function(){
    setupHover(); /* Defined below */
    $('#show').toggle(function(){
        $('#home-hidden-extra').animate({'height': '480px'} ,1000);
        setupHover();
    },function(){
        $('#home-hidden-extra').animate({'height': '0px'} ,1000);
        setupHover();
    });
  });

  function setupHover(){
      /* Unbind existing hover handlers */
      $('#show').unbind('mouseenter mouseleave');

      /* Use the correct image filenames depending on the situation */

      if($('#home-hidden-extra').height() > 0){
        images = ['show-me.png','show-me_over.png'];
      }
      else {
        images = ['hide_me.png','hide_me-over.png'];
      }
      $('#show').hover(function(){
          $('#the-image').attr('src','images/' + images[1]);
        },function(){
          $('#the-image').attr('src','images/' + images[0]);
        });
  }
于 2012-07-19T20:18:30.950 に答える