Hallo zusammen, ich hab derzeit ein Problem mit JQuery in Verbindung mit mouseover und mouseout, sobald die beiden Events auf mehrere Objekte angewendet werden.
Hab zur Verdeutlichtung mal ein Video gemacht --> mouseover.zip
Wie man auf dem Video sieht, möchte ich beim mouseover das jeweilige DIV einblenden und beim mouseout entsprechend wieder schließen. So lange ich das ganze lediglich auf 1 Objekt anwende, funktioniert es ohne Probs. Kommt ein zweites DIV hinzu, funktioniert ausschließlich das was zu erst initialisiert wird, ohne Probleme. Bei allen weiteren wird immer das Event von alle anderen DIVs mit ausgelöst.
Hier mal der HTML-Code
<div id="contactIcon"><span id="contactIconText">{#LANG_GLOBAL_CONTACTICON_TEXT#}</span><div>
<div id="leafletsIcon"><span id="leafletsIconText">{#LANG_GLOBAL_CONTACTICON_TEXT#}</span><div>
und entsprechende der JQuery-Code
$("#contactIcon").mouseover(function() {
$('#contactIcon').css('width', '160px');
$('#contactIcon').css('height', '160px');
$('#contactIcon').css('border-radius', '80px');
$('#contactIcon').css('background', "url('/images/contactIcon48.png') no-repeat center bottom #9c0000");
$('#contactIcon > span').css('visibility', 'visible');
}).mouseout(function() {
$('#contactIcon').css('width', '50px');
$('#contactIcon').css('height', '50px');
$('#contactIcon').css('border-radius', '25px');
$('#contactIcon').css('background', "url('/images/contactIcon32.png') no-repeat center center #9c0000");
$('#contactIcon > span').css('visibility', 'hidden');
}).click(function() {
window.location = '/contact17/kontakt/';
});
$("#leafletsIcon").mouseover(function() {
$('#leafletsIcon').css('width', '160px');
$('#leafletsIcon').css('height', '160px');
$('#leafletsIcon').css('border-radius', '80px');
$('#leafletsIcon').css('background', "url('/images/leafletsIcon48.png') no-repeat center bottom #005d31");
$('#leafletsIcon > span').css('visibility', 'visible');
}).mouseout(function() {
$('#leafletsIcon').css('width', '50px');
$('#leafletsIcon').css('height', '50px');
$('#leafletsIcon').css('border-radius', '25px');
$('#leafletsIcon').css('background', "url('/images/leafletsIcon32.png') no-repeat center center #005d31");
$('#leafletsIcon > span').css('visibility', 'hidden');
}).click(function() {
window.location = '/index69/prospekte-herunterladen/';
});
Display More
Beim ONClick wird generell nur das zuerst initialiserte ausgeführt, heißt, egal welches DIV angeklickt wird, ich lande immer auf /contact17/kontakt/.
Einer ne Idee? Ich steht aufem Schlauch...