Question

我在名为uptoppage的自定义HTML标记中有2个表单。

当文档加载时，我向上滑动包含表单的元素。一旦有人将鼠标悬停在父元素上，我希望它向下滑动。相反，没有任何事情发生。

这是我的标记：

<uptoppage>controller....
  <uptpc>
    <form>.....</form>
    <form>......</form>
  </uptpc>
<uptoppage>

这是我正在使用的jQuery：

$("uptoppage").hover(function() {
  $('uptpc', this).slideDown();
}, function() {
  $('uptpc', this).slideUp();
});

Answer 1

注意尺寸变化

我认为您使用hover()或回调函数没有任何问题。我修改了你的榜样;我看到的主要奇怪行为是隐藏了子元素，导致父元素变得如此之小以至于它从鼠标下移出。

换句话说，jQuery正在观察你是否在一个元素上盘旋。如果那个元素在增长和缩小，它可能会改变你是否仍然在它上面，触发悬停，然后悬停等，而不用你的鼠标移动。因此，请确保您在父元素中有一些其他内容和/或它具有一定的CSS大小。

检查您的标记

我也同意第一条评论：如果你能避免，你不应该使用自定义元素。我给了父元素一个边框，以便我可以看到它有多大，但是直到我把它设为一个带有id的div而不是自定义元素类型时才显示样式。

如果可能的话，使用id和类来标识标准元素，而不是使用自定义元素。你的标记越不寻常，你对问题的不确定性就越大 - “这是我的JS的问题，还是浏览器在我的自定义HTML上窒息？”

Answer 2

<script type="text/javascript">
     $(document).ready(function(){ 
           $('form').hover(function(){
             $('form').slideUp();
             $(this).slideDown();
           });
        });
</script>

为什么这个jQuery hover（）不工作？

2 个答案:

注意尺寸变化

检查您的标记