javascript - 使用 jquery 更改悬停时的背景颜色无法正常工作

Question

我正在尝试使用 JQuery 更改悬停时的 menuOption 背景色。我所有的代码都工作正常，我遇到的唯一问题似乎与 CSS 相关。当背景颜色发生变化时，它似乎只改变了文本的背景颜色，而不是整个 div，这正是我想要的。我觉得奇怪的是，当我进入 menuOption 元素的内联 CSS 并手动更改背景颜色时，它会更改整个 div 背景颜色(这是我想要的)。但是，我需要使用 JQuery 来实现这一点。

标记片段

<div class='menuOption' style='list-style-type:none; border:1px solid red; float:left; width:180px; height:20px;'>
<a href='index.php/shop/$sub[cat_url]/' style='color:black;'>
<div class='cat_name'>$sub[cat_title]</div>
</a>
<div class='sub_menu' style='display:none; z-index:100; margin-top:-12px; position:absolute; background-color:#ddd; margin-left:182px; box-shadow:3px 3px 6px #444;'>$itemlist</div>
</div>

JQuery 片段

$(".cat_name").hover(function(){
    $(this).parent().parent().find(".sub_menu").show();
    $(this, ".menuOption").css("background-color", "#bbb");
});
$(".cat_name").mouseleave(function(){
    $(this, ".menuOption").css("background-color", "#eee");
});

我很感激任何关于如何解决这个问题的建议。谢谢。

Answer 1

这应该做你想做的:

示例:http://jsfiddle.net/jrDph/3/

$(".cat_name").hover(function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").show();
    $menuOption.css("background-color", "#bbb");
},
function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").hide();
    $menuOption.css("background-color", "#eee");
});​