Ändern der Hintergrundfarbe bei Hover funktioniert nicht richtig mit jquery

Question

Ich versuche, die Menüoption Hintergrundfarbe bei Hover mit JQuery zu ändern. All mein Code funktioniert einwandfrei, das einzige Problem, das ich habe, scheint CSS zu sein. Wenn sich die Hintergrundfarbe ändert, scheint es nur die Hintergrundfarbe des Textes zu ändern, im Gegensatz zum gesamten div, was ich möchte. Was ich seltsam finde, ist, wenn ich in das Inline-CSS des menuOption-Elements gehe und die Hintergrundfarbe manuell ändere, ändert es die gesamte divs-Hintergrundfarbe (was ich will). Allerdings muss ich dies mit JQuery erreichen.

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

schätze ich irgendwelche Vorschläge, wie dies herauszufinden. Vielen Dank.

Answer 1

Dies tun sollten, was Sie wollen:

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

Answer 2

Theorie: Sie setzen Ihren JavaScript-Code nicht in einen "Dies tun, nachdem das Dokument geladen hat" -Block. Das wird in etwa so aussehen:

$.fn.ready(function() { 
    $(".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"); 
    }); 
}); 

Als Referenz $.fn.ready ist eine andere Art und Weise $(document).ready zu sagen (was schneller ist, glaube ich).

Es könnte jedoch ein separates Problem sein.

Answer 3

diesem Code

http://jsfiddle.net/jt795/1/

$(this, "menuoption") it's not the rightway 

-Code es individuell $ (this) css (....) $ Versuchen ("menuoption"). Css (. ..) weil $ (this) das Objekt zurückgibt, wird es keinen Tagnamen geben, also könnte man nicht so schreiben.

Answer 4

Hier ist ein Gedanke für Ihre jQuery:

Wenn Sie feststellen, verwenden werden(), die den DOM gesucht nach unten, dann sollten Sie am nächsten() verwenden, die den DOM (statt .parent suchen nach oben() .Elternteil()). Sie können .closest ('div') oder .closest ('. MenuOption') eingeben. Wenn Sie dann entscheiden, dass Sie ein weiteres Element hinzufügen müssen, das den Katzennamen umschließt, müssen Sie keinen weiteren parent() -Aufruf hinzufügen. Ein Methodenaufruf ist normalerweise besser als mehrere.

Außerdem werde ich ein großer Anwalt von coffeescript. http://coffeescript.org/. Wenn Sie in der Stimmung sind, etwas Neues zu lernen, sollten Sie sich damit beschäftigen. Es kompiliert zu Javascript und sieht fast wie Javascript minus alle Klammern, Klammern und Semikolons aus. Leicht lesbarer Code ist der beste Code!

Answer 5

TRY THIS CODE

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