Question

我正在学习JavaScript和jQuery，并且在进行以下练习时遇到了问题。我在页面的右侧有一个div，其中包含另一个较小的div，该div包含带有一些img的无序列表，我只想在鼠标指针进入第一个div时出现。

问题在于，当鼠标指针进入第一个div时，较小的那个会开始不受控制地上下移动。

我尝试在较大的div上使用.is（：hover）方法，这是关于SO的另一个问题所建议的，但它没有帮助。

这是我的代码：

def NameGenerator():
    namelist_file = open('StudentNames&Questions.csv')
    reader = csv.reader(namelist_file)
    rownum=0
    global array
    array=[]
    for row in reader:
        if row[0] != '':
            array.append(row[0])
            rownum=rownum+1
    length = len(array)-1
    i = random.randint(1,length)
    name = array[i]
    return name

stato = "out";

$("#control").mouseover(

  function() {

    if (stato == "out")
      $("#socialBox").animate({
        top: 300
      });
    //$("#socialBox").show();
    stato = "in";



  }

);


$("#control").mouseleave(

  function() {
    $("#socialBox").animate({
      top: -500
    });
    //$("#socialBox").hide();
    stato = "out";

  }

);

body {
  background: lightblue;
}

img {
  height: 50px;
  width: 50px;
}

ul {
  list-style-type: none;
}

#control {
  position: fixed;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100px;
  background: yellow;
}

#socialBox {
  position: fixed;
  top: -500px;
  right: 0px;
  width: 75px;
  background: red;
}

我也尝试过使用其他鼠标事件，例如mouseenter和mouseout，但遇到相同的问题。

谢谢。

Answer 1

触发该行为是因为“ #socialBox”进入视图，然后阻止了鼠标指针和“ #control”之间的“路径”，因此脚本触发了mouseleave-event。

首先，摆脱mousemove ...使用mouseenter，然后可以删除stato变量。

接下来，将“ #control” div包裹在“ #socialbox”周围，如下所示：

<div id="control">
  <div id="socialBox">
    <ul>
      <li><img id="cane" src="img/cane.jpg" /></li>
      <li><img id="gatto" src="img/gatto.jpg" /></li>
      <li><img id="koala" src="img/koala.jpg" /></li>
      <li><img id="mucca" src="img/mucca.jpg" /></li>
      <li><img id="panda" src="img/panda.jpg" /></li>
      <li id="nascondi"> X </li>
    </ul>
  </div>
</div>

Answer 2

如Thieri所述，您需要将socialBox包装在control格内。

socialBox未绑定到父div。

stato = "out";

$("#control").mouseover(
  function() {
    if (stato == "out")
      $("#socialBox").animate({
        top: 0
      });
    //$("#socialBox").show();
    stato = "in";
  }
);


$("#control").mouseleave(
  function() {
    $("#socialBox").animate({
      top: -500
    });
    //$("#socialBox").hide();
    stato = "out";
  }
);

body {
  background: lightblue;
}

img {
  height: 50px;
  width: 50px;
}

ul {
  list-style-type: none;
}

#control {
  position: fixed;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100px;
  background: yellow;
}

#socialBox {
  position: fixed;
  top: -500px;
  right: 0px;
  width: 75px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
  <div id="socialBox">
    <ul>
      <li><img id="cane" src="img/cane.jpg" /></li>
      <li><img id="gatto" src="img/gatto.jpg" /></li>
      <li><img id="koala" src="img/koala.jpg" /></li>
      <li><img id="mucca" src="img/mucca.jpg" /></li>
      <li><img id="panda" src="img/panda.jpg" /></li>
      <li id="nascondi"> X </li>
    </ul>
  </div>
</div>

Answer 3

问题是您的动画#socialBox没有嵌套到#control中。无论您使用哪种鼠标事件，只要动画框进入光标下方，光标都会“离开” #control，从而触发隐藏动画。

如果要保持标记不变，则可以使用计时器延迟动画。在以下我的解决方案中，计时器可确保如果#control mouseleave和#socialBox mouseenter（几乎反之）同时触发，则动画将不会执行。

在动画播放之前，我还打电话给.stop()，以避免过快地移动鼠标来排队多个动画。

var shown = false;
var timer;

function triggerAnimation(show) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        // If we're already on the same state, no need to animate
        if (show === shown) return;

        // Animate socialBox
        $("#socialBox").stop().animate({ top: show ? 300 : -500 });

        // Toggle state
        shown = !shown;
    }, 10);
}

$("#control, #socialBox")
    .mouseenter(function() { triggerAnimation(true); })
    .mouseleave(function() { triggerAnimation(false); });

body { background: lightblue; }
img { height: 50px; width: 50px; }
ul { list-style-type: none; }
#control { position: fixed; right: 0px; top: 0px; height: 100%; width: 100px; background: yellow; }
#socialBox { position: fixed;  top: -500px; right: 0px; width: 75px; background:red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control"></div>
<div id="socialBox">
    <ul>
        <li><img id="cane" src="img/cane.jpg"/></li>
        <li><img id="gatto" src="img/gatto.jpg"/></li>
        <li><img id="koala" src="img/koala.jpg"/></li>
        <li><img id="mucca" src="img/mucca.jpg"/></li>
        <li><img id="panda" src="img/panda.jpg"/></li>
        <li id="nascondi"> X </li>
    </ul>
</div>

Answer 4

TL; DR ：将socuialBox格移到content格中。

完整的说明：问题全是由于事件冒泡。

首先，您的html需要更改，因为socialBox div在control div之外，即使在使用mouseenter和mouseleave的情况下，事件也会重复触发。因此，socialBox被移到control div中并使用了mouseenter和mouseleave事件。

第二，事件冒泡。由于事件冒泡，问题仍然出现在第一步之后。

鼠标悬停-将鼠标指针移到元素中时触发。在子元素上移动时，会触发子元素的事件，并且会导致引发父级mouseover的事件冒泡。

鼠标移出-与mouseover相同，但在离开元素时触发。

mouseenter -仅在鼠标指针进入事件所绑定的元素时触发。活动不会冒泡。

mouseleave -与mouseenter相同，但在将事件绑定到元素时将其触发。

要更清楚地了解，请参阅这些文档。 jQuery mouseover，jQuery mouseout。

@gilly3很好用，可以演示his answer

中的事件

stato = "out";

$("#control").mouseenter(function() {
    $("#socialBox").animate({
      top: 100
    });
    stato = "in";
});


$("#control").mouseleave(function() {
    $("#socialBox").animate({
      top: -500
    });
    stato = "out";
});

body {
  background: lightblue;
}

img {
  height: 50px;
  width: 50px;
}

ul {
  list-style-type: none;
}

#control {
  position: fixed;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100px;
  background: yellow;
}

#socialBox {
  position: fixed;
  top: -500px;
  right: 0px;
  width: 75px;
  background: red;
  pointer:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
    <div id="socialBox">
      <ul>
        <li><img id="cane" src="img/cane.jpg" /></li>
        <li><img id="gatto" src="img/gatto.jpg" /></li>
        <li><img id="koala" src="img/koala.jpg" /></li>
        <li><img id="mucca" src="img/mucca.jpg" /></li>
        <li><img id="panda" src="img/panda.jpg" /></li>
        <li id="nascondi"> X </li>
      </ul>
    </div>
</div>

使用.animate和.mouseover让元素显示/消失

4 个答案: