.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

回答

相关问题