0

我想在悬停“切换 1”时显示“1”，并在单击“切换 1”时显示“2”。我还想创建一个规则，其中“切换 2”将在悬停时显示“3”，在单击时显示“4”。我将“悬停（切换 1）的关闭 div 放在“前（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>
4

2 回答 2

4

您的关闭 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-12T20:41:12.550 回答
0

你的代码没有任何意义。

$("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-12T20:54:18.777 回答