javascript - 我应该如何使用 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/