.hover and .click, verschiedene Funktionen auf demselben div, Jquery

Ich möchte "1" zeigen, wenn ich "Toggle 1" schwebe, und "2", wenn ich auf "Toggle 1" klicke. Ich möchte auch eine Regel erstellen, wo "Toggle 2" "3" bei Hover und "4" bei Klick anzeigen würde. ich die Schließung div für put „Hover (Toggle-1) hinter‚vorne (2)‘in der Lage sein 2 zu klicken und wechseln..hover and .click, verschiedene Funktionen auf demselben div, Jquery

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div class="hover">Toggle 1 
<div class="front" style="display:none">2</div></div> 
<div class="back" style="display:none">1</div> 

<div class="hover">Toggle 2 
<div class="front" style="display:none">4</div></div> 
<div class="back" style="display:none">3</div> 

<script> 

$("div.hover").click(function() { 
$("div.front").toggle(); 
}); 

$("div.hover").hover(
function() { $(this).children("div.back").show(); }, 
function() { $(this).children("div.back").hide(); } 
}); 
</script> 

</body> 
</html>

Quelle

2012-04-12 Artroing

Verwenden '$ .on()', '$ nicht .click/Hover/ändern/leben()', etc.! –

Ihr Code keinen Sinn macht.

$("div.hover").hover(
function() { $(this).children("div.back").show(); }, 
function() { $(this).children("div.back").hide(); } 
});

Was versuchst du? Verstecken und gleichzeitig zeigen?

Greg B. hat recht, aber es behebt das Problem nicht.

diesen Code Versuchen:

 <!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div class="hover">Toggle 1 
<div class="front" style="display:none">2</div> 
<div class="back" style="display:none">1</div> 
</div> 
<div class="hover">Toggle 2 
<div class="front" style="display:none">4</div> 
<div class="back" style="display:none">3</div> 
</div> 
<script> 


hoverdiv = $("div.hover") 

hoverdiv.on("hover", function() { 
    $(this).children(".front").show() 
}); 
hoverdiv.on("mouseleave", function() { 
    $(this).children(".front").hide() 
}) 
hoverdiv.on("click", function() { 
    $(this).children(".back").toggle() 
}) 
</script> 

</body> 
</html>

Quelle

2012-04-12 20:54:18

Danke, ich denke, das ist die Lösung, nach der ich suche. – Artroing

Ich habe ein Problem hier. Jetzt ist die Aktion nicht länger auf eine davon beschränkt, sondern alle Aktionen werden gleichzeitig an Toggle1 und Toggle2 ausgeführt. – Artroing

Sie können 'hoverdiv = $ (" div.hover ")' mit 'hoverdiv = $ (" div.hover: first ")' ersetzen. –

Ihre Schließung div sind an der falschen Stelle und es ist es Verschrauben up denke ich.

<div class="hover">Toggle 1 
    <div class="front" style="display:none">2</div> 
    <div class="back" style="display:none">1</div> 
</div> 

<div class="hover">Toggle 2 
    <div class="front" style="display:none">4</div> 
    <div class="back" style="display:none">3</div> 
</div>

bereite.

Quelle

2012-04-12 20:41:12

Perfekt http://jsfiddle.net/5ReXv/1/ +1 :) –

Vielen Dank! – Artroing

.hover and .click, verschiedene Funktionen auf demselben div, Jquery

Antwort

Verwandte Themen