JavaScript Funktionen Verbinden mit JQuery (JSFiddle)

[kliph]

Hallo zusammen,

hier mal der Link zu JSFiddle: http://jsfiddle.net/j6K93/3/

Mein Problem:
Ich würde gerne, wenn ich über die Anrede mit der Maus gehe (mouseenter), dass das Icon vorne blau wird. Dementsprechend wenn ich "mouseleave" mache, dass das Icon wieder grau wird. Soweit funktioniert das auch.
Nur wenn ich nun bei der Anrede "Mann" oder "Frau" auswähle, wird das Icon grau, obwohl der Kasten eigentlich noch "focused" ist und somit noch nen blauen Rahmen hat und das Icon somit auch noch blau sein sollte. Irgendwie schaffe ich es nicht, die JQuery Funktionen zu verbinden, sodass alles grau oder alles blau ist. Könnte mir da jemand weiterhelfen?

Vielen Dank schonmal!

 

[Demon0no]

Wieso in jQuery und nicht in CSS?

€: Hier stand Mist :3

€2:

So, ich denke, das ist genau was du willst:

$("#anrede").focus(function () {
    $("#anredeimg").attr('src', "http://s14.directupload.net/images/140730/hofr8puf.png");
})

$("#anrede").blur(function () {
    $("#anredeimg").attr('src', "http://s1.directupload.net/images/140730/l3x826j8.png");
})

$("#anrede").mouseenter(function () {
    $("#anredeimg").attr('src', "http://s14.directupload.net/images/140730/hofr8puf.png");
})

$("#anrede").mouseleave(function () {
    if(!$("#anrede").is(":focus"))
        $("#anredeimg").attr('src', "http://s1.directupload.net/images/140730/l3x826j8.png");
})

 

[Yuuri]

Das funktioniert so logischerweise nicht. focus() tritt ja nicht auf, wenn der Hover weg geht. Da musst du schon Statusvariablen nutzen, damit du weißt, wann !(hover && focus) ist, damit du das Bild wieder grau hinterlegen kannst.

Wenn du allerdings nur mit CSS arbeitest, geht alles viel einfacher und sauberer. http://jsfiddle.net/j6K93/4/

 

[Daaron]

Eben, das ist kein JS-Problem sondern ein reines CSS-Problem.