Question

我想在悬停“切换1”时显示“1”，当我点击“切换1”时显示“2”。我还想创建一个规则，其中“Toggle 2”在悬停时显示“3”，在点击时显示“4”。我把关闭div“hover（toggle 1）”放在“front（2）”后面，以便能够点击2来切换。

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

Answer 1

你的结束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>

试试。

Answer 2

您的代码没有任何意义。

$("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>

.hover和.click，同一个div上的不同函数，Jquery

2 个答案: