如何更改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); 
}​