jquery - 通过类 JQuery 用鼠标更改背景颜色

Question

我已经给一组 div 上课，并希望在鼠标悬停时更改 div 的背景颜色。我所做的是：
HTML

<div class="menu_top">
<div id="1" class="menu_top_menu">Home</div> 
<div id="2" class="menu_top_menu">About Us</div> 
<div id="3" class="menu_top_menu">Register</div> 
<div id="4" class="menu_top_menu">Contact Us</div> 
</div>

jQuery

$(document).ready(function() {
    $('.menu_top_menu').mouseover(function(){
    $('this').attr('style','background-color:yellow;');
    });
});

这确实适用于 ID 参考，但我想使用类。我究竟做错了什么 ？

Answer 1

使用$(this)而不是$('this')- 周围没有引号this。

此外，您通常不会使用attr()来设置style，而是使用该.css()方法来设置相关的特定 CSS 属性：

$(this).css('background-color', 'yellow');

请注意，如果打算仅在鼠标悬停在元素上时更改背景（即，在鼠标移出时将其更改回），您可以通过使用:hoverCSS 中的伪类轻松地在没有 JS 的情况下完成它：

div.menu_top_menu:hover {
    background-color : yellow;
}