.hover和.click，同一div上的不同功能，Jquery

我想在懸停「切換1」時顯示「1」，當點擊「切換1」時顯示「2」。我也想創建一個規則，其中「切換2」在懸停時顯示「3」，點擊時顯示「4」。我把結束div爲「懸停（切換1）後面的‘前（2）’，以能夠單擊2切換爲好。.hover和.click，同一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>

來源

2012-04-12 Artroing

使用'$。對（）'，'不是$。點擊/懸停/變更/生活（）'等等！ – 2012-04-12 20:40:07

您的代碼不作任何意義。

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

你在想什麼？同時隱藏和顯示？

Greg B.是對的，但它不能解決問題。

試試這個代碼：

 <!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>

來源

2012-04-12 20:54:18

謝謝，我認爲這是我尋找的解決方案。 – Artroing 2012-04-12 21:01:11

我在這裏遇到問題。現在這個動作不再侷限於其中的一個，但是所有動作都同時發生在Toggle1和Toggle2上。 – Artroing 2012-04-12 21:16:44

你可以用hoverdiv = $（「div.hover：first」）替換'hoverdiv = $（「div.hover」）''。 – 2012-04-12 21:20:38

你結束div是在錯誤的地方和它的將它擰緊了我的想法。

<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>

嘗試。

來源

2012-04-12 20:41:12

完美http://jsfiddle.net/5ReXv/1/ +1 :) – 2012-04-12 20:42:42

非常感謝！ – Artroing 2012-04-12 21:01:01

.hover和.click，同一div上的不同功能，Jquery

回答

相關問題