Zmień kolor tła div za pomocą instrukcji warunkowej

Question

Mam 2 elementy div obok siebie i domyślnie jeden jest ukryty, a drugi widoczny.

Mam funkcję jQuery, która po mouseenter widzialnego div, ukryte Jeden pokazuje. A kiedy mysz jest ponownie, staje się ponownie ukryty. (Jest to pole logowania)

Jednak - chcę, aby zawsze widoczny div (cel myszy) zmieniał kolor w zależności od tego, w jakim stanie znajduje się włączony div. Do tej pory mogę go zmienić po pierwszym mouseenter, ale później się nie zmieni.

Oto kod mam tak daleko:

<script> 
$(document).ready(function() { 
    $("#loginBox").hide(); 
    $("#sideBar").show(); 

    $('#sideBar').mouseenter(function() { 
     $("#loginBox").toggle("slide"); 
     if ($('#loginBox').is(":visible")) { 
      $("#sideBar").css("background-color","blue"); 
     } else if ($('#loginBox').is(":hidden")) { 
      $("#sideBar").css("background-color","yellow"); 
     }  
    }); 
}); 
</script> 

Więc zaczyna się w domyślnym kolorem (szary przez arkusz stylów), a kiedy mouseenters to loginBox staje się widoczny na pasku bocznym i zmieni kolor na niebieski. Ale gdy mouseenters ponownie, nawet jeśli loginBox zostanie ukryty, sideBar pozostaje niebieski.

JSFiddle

Answer 1

Można umieścić czek w pełnej funkcji przełączania

http://jsfiddle.net/3rQNb/4/

$("#aside").toggle("slide", function() { 
    var onOrOff = $('#asidebar').css("background-color"); 
    if ($('#aside').is(":visible")) { 
     $("#asidebar").css("background-color","blue"); 
    } 
    else { 
     $("#asidebar").css("background-color","yellow"); 
    }  

}); 

Answer 2

Lepiej odpychające style na klasy i że zamiast toggle. Coś jak

... 
$('#sideBar').mouseenter(function() { 
    $("#loginBox").toggle("slide"); 
    $("#sideBar").addClass("semanticallyNamedClassForBlue"); 
    $("#sideBar").toggleClass("semanticallyNamedClassForYellow"); 
}); 
... 

CSS:

#sideBar.semanticallyNamedClassForBlue {background: blue} 
#sideBar.semanticallyNamedClassForYellow {background: yellow} 

jak na tym jsfiddle adaptacją user3787555 za http://jsfiddle.net/3rQNb/3/

Objaśnienie:

• Na obciążeniem bocznym jest szary.
• po pierwszym najechaniu obie żółte i niebieskie klasy są dodawane do elementu, ale jako że żółta klasa jest ostatnia w źródle css, wygrywa kaskadę.

• na następnym kursie, żółta klasa jest usuwana, więc niebieski teraz wygrywa.

• dodałem id do reguły css, aby uzyskać specyficzność na tyle - jak wiedzieć #id bije .class w kaskadzie

Jeśli chcesz dowiedzieć się więcej, A List Apart's CSS articles i Remy Sharp's JQuery for designers może dać masz trochę radości. Jeśli chcesz dowiedzieć się więcej o specyficzności spojrzenia na star wars specificitySuper niesamowite