Question

我正在构建一个网页，其中一个页脚会在鼠标悬停在其上时展开，并在鼠标离开时缩小。原始代码：

autoprefixer-rails

但是，我现在想要防止当用户仅从下面离开时页脚缩小，即只是离开浏览器窗口。是否有某种方法将$(document).ready(function() { $("footer").mouseenter(function() { $(this).animate( {"height": "10%", "opacity": 0.7} , 300 ); }); $("footer").mouseleave(function() { $(this).animate( {"height": "5%", "opacity": 0.3} , 300 ); }); });的内容纳入&&mouseup()，以便页脚只能在用户离开顶部时收缩？

代码：

$("footer").mouseleave(function() { ... });

Answer 1

这只是一个概念。如果我理解正确，当鼠标从其顶部边缘离开页脚区域时，您只希望页脚缩小。在这种情况下，您可以在页脚顶部添加另一个透明DIV，并指定高度为0.

当鼠标进入页脚时，根据需要增加页脚高度，并将透明DIV的高度增加1px。
当鼠标进入透明DIV时，缩小页脚并将透明DIV的高度设置为0px。

＆＃13;

$(function() {
  $('.footer').on('mouseenter', function() {
    $(this).css('height', '10%');
     $('.footer .top_edge').css('height', '1px');
  });
  
  $('.footer .top_edge').on('mouseenter', function() {
    $('.footer').css('height', '5%');
    $('.footer .top_edge').css('height', '0');
  });
});

＆＃13;

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #91d895;
  height: 5%;
}

.footer > .wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.footer .top_edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="wrapper">
    <div class="top_edge"></div>
  </div>
</div>

＆＃13;

Answer 2

根据我的理解，当用户将鼠标悬停在其初始状态时，您希望页脚增长，然后保持该大小，直到鼠标离开页脚，页面上的其他位置。

如果这是你想要实现的目标，那么其他解决方案似乎很复杂。

考虑这个HTML：

<header></header>
<div class="page-contents">
    <!-- stuff that makes this big -->
</div>
<footer></footer>

这个jQuery：

$(document).ready(function() {
    $footer = $("footer");
    // This will make the footer grow on enter
    $footer.mouseenter(function() {
        $footer.animate( {"height": "10%", "opacity": 0.7} , 300 );
    });
   // This will make the footer shrink to original (css defined) size
    $(".page-contents").mouseenter(function() {
        $footer.animate( {"height": "5%", "opacity": 0.3} , 300 );
    });
});

我认为那可以做你想要的。

编辑：只是指出，通过为变量分配$("footer")，您可以缓存它，这有利于提高性能。（这只是一个很好的做法。）

如何使效果依赖于jQuery中的两个事件？

2 个答案: