如何更改jQuery中按钮悬停的背景图像？

Question

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

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

Answer 1

我认为你需要使用url('path')用CSS。你需要在处理程序和处理程序出来，看到的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

一个简单的方法

定义两类

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

Answer 3

被使用CSS最简单的方法。

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

CSS

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