0

问题：

我有 2 个幻灯片，有点像菜单。

<div id="one" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla2</div>

这个 jQuery 脚本：

<script>
$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    });
});
</script>

主要思想是如果悬停#one，则向下滑动#block1，如果悬停#two，则向下滑动#block2

但是有一个问题：

悬停#one时，它工作正常。

但是，当您将鼠标悬停在#two 时，什么也没有发生。

如果你悬停#one 然后#two，它会工作，但最后它会再次滑下#block1。我不知道是什么原因造成的？

问题

我做错了什么？我如何做到这一点，当您悬停#one 时，它​​会切换#block1，而当我悬停#two 时，它会切换#block2。

我刚开始学习 jQuery，对语法真的很困惑。谢谢！

4

4 回答 4

2

Hover 需要两个处理程序：当鼠标指针进入和离开元素时。如果您为您的方法使用mouseover或添加另一个处理程序，它应该可以工作hover

你的 HTML 和 CSS 有问题，所以我以这个 HTML 为例：

<div id="one" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: right;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: right; display: none;">Blabla2</div>

jQuery：

$(".div").each(function(i) {
    var index = i + 1;
    $(this).hover(
      function () {
        $(this).siblings("#block" + index).slideDown("slow");
      },
      function () {
        $(this).siblings("#block" + index).slideUp("slow");
      }
    );
});

Working Demo

于 2013-04-07T13:08:44.080 回答
1

另一个想法。“高度”存在拼写问题，您可以尝试 div 中包含的块。

我改变了一些东西，它在这里工作 http://jsfiddle.net/G3BuZ/1/

$(document).ready(function() {
        $("#one").hover(function() {
        $("#block1").slideDown("slow");
    });
        $('#one').mouseleave(function() {
        $("#block1").slideUp("slow");
    });
        $("#two").hover(function() {
        $("#block2").slideDown("slow");
    });
        $('#two').mouseleave(function() {
        $("#block2").slideUp("slow");
    });  

});
于 2013-04-07T13:36:38.570 回答
0

工作小提琴：

http://jsfiddle.net/HKNDY/3/

这有效-悬停有两个部分（悬停on和悬停off）。当鼠标悬停在div.

$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    }, function(){
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    }, function(){
         $("#block2").slideToggle("slow");
    });
});
于 2013-04-07T13:09:42.303 回答
0

实际上，您的代码正在运行。如果你移过右边的盒子，你就会Blabla2在那里。问题是左边的 divBlabla是隐藏的，所以Blabla2浮动到最左边，而不是在#two. 您需要为此更改 CSS。

于 2013-04-07T13:11:11.890 回答