jquery - jqueryのボタンホバーで背景画像を変更するには?

Question

マウスホバーイベントでボタンの背景画像を変更したい。
私は次のコードを使用しています：

 $("#btnCBI").hover(function () {
     $(this).css({ "background-image": "/Tulips.jpg" });
 });

Answer 1

url('path')cssで使う必要があると思います。hover()の効果を確認するには、handler in と handler out が必要です。

$("#btnCBI").hover(function () {
      $(this).css({ "background-image": "url('/Tulips.jpg')" });
   },
   function () {
      $(this).css({ "background-image": "url('/otherImage.jpg')" });
   }
);

マウスがボタンから離れたときに元に戻したくない場合は、mouseenter()を使用できます。

$("#btnCBI").mouseenter(function () {
   $(this).css({ "background-image": "url('/Tulips.jpg')" });
});

Answer 2

最も簡単な方法は、css を使用することです。

<button id="css">CSS</button>

CSS

​#btnCBI:hover{
    background-image: url(/Tulips.jpg);
}​

Answer 3

簡単な方法

2 つのクラスを定義する

<style>
    .in{
    //your hover image
    }

    .out{
    //your normal image

    }
    </style>
$("#btnCBI").mouseover(function () {
$(this).removeClass('out').addClass('in')
});

$("#btnCBI").mouseout(function () {
$(this).removeClass('in').addClass('out')
});