Question

I am trying to change the menuOption background-color on hover using JQuery. All my code works fine, the only problem I am having seems to be CSS related. When the background color changes it seems to change the background color of text only as opposed to the entire div, which is what I want. What I find weird is when I go into the inline CSS of the menuOption element and manually change the background-color it changes the entire divs background color (which is what I want). However, I need to achieve this using JQuery.

Markup Snippet

<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 Snippet

$(".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");
});

I appreciate any suggestions on how to figure this out. Thank you.

Answer 1

This should do what you want:

Example: 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");
});​