jquery - 如何在jquery中更改按钮悬停时的背景图像？

Question

我想在 mousehover 事件上更改按钮的背景图像。
我正在使用以下代码：

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

Answer 1

我认为您需要url('path')与css一起使用。您需要 handler in 和 handler out 来查看hover()的效果

$("#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

一个简单的方法

定义两个类

<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')
});