如何在鼠標懸停時使用JQuery更改DOM元素的背景顏色？

Question

是否可以在鏈接中執行jQuery的代碼？ 例如，我可以這樣做嗎？

<a href="index.php" onmouseover="$(this).css("background-color","#111111");">Home</a>

我想在某些鏈接中使用它來創建某種效果，而不要觸摸更多CSS。

Answer 1

您正在用JavaScript中的引號關閉屬性引號。

要么逃避他們，

onmouseover="$(this).css(\"background-color\",\"#111111\");"

或對內部或外部使用單引號。

onmouseover='$(this).css("background-color","#111111");'

Answer 2

你要這個：

<script type="text/javascript">
$(function(){
     $("a").hover(
       function () {
         $(this).addClass("hover");
       },
       function () {
         $(this).removeClass("hover");
       }
     );
});
</script>

<style type="text/css">
.hover{
     background-color: #111111;
}
</style>

<a href="index.php">Home</a>

您可以在以下位置找到其他資源： http : //api.jquery.com/hover/

Answer 3

$('document').ready(function() {
  $('a').hover(function() {
    // on hover
    $(this).css("background-color","#111111");
  }, function() {
    // on mouse leave
    // code
  });
});

Answer 4

<a href="index.php" onmouseover="$(this).css('background-color','red');">Home</a>將起作用。

您曾經onmouseover="$(this).css("background-color","#111111");"

我使用了onmouseover="$(this).css('background-color','red');"

演示位於http://jsfiddle.net/2dJAN/44/

注意：您可以使用像http://jsfiddle.net/2dJAN/45/