0

所以我有一些看起来像这样的javascript：

var headshot = {
  enter: function(e) {
    $(e.target).find('.overlay').slideDown();
  },

  exit: function(e) {
    $(e.target).find('.overlay').slideUp();
  }
}
····
$(function() {
  $('.headshot').hover(headshot.enter, headshot.exit);
});

和一些看起来像这样的 html(haml)：

.board-row
  .headshot
    .overlay
      blahblah
      %br
      Chief Javascript Architect
  .headshot
    .overlay
      blah
      %br
      Liason
  .headshot
    .overlay
      etc
      %br
      Kati Roll Advocate
  .headshot
    .overlay
      blah
      %br
      Javascript Developer

像这样的一点CSS：

  .board-container {
    margin-top: 60px;
    padding: 0;
  }
··
  .board-row {
    padding: 0;
    width: 100%;
    height: 200px;
    }

  .headshot {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 24%;
  }

  .overlay {
    width: 24%;
    height: 50%;
    opacity: 0.3;
    background: black;
    position: absolute;
    display: none;
    color: white;
  }

我认为将 javascript 与其他所有内容结合起来会创建一个漂亮的幻灯片动画，其中不透明的 div 会显示在包含 html 中文本的头像上。当我将鼠标悬停在图像上时，确实会发生这种情况（尽管我不确定为什么需要将叠加层上的 CSS 宽度和高度分别设置为 24% 和 50%，但我认为它会采用如果我将它们设置为 100%，则为爆头父元素）。但是，当我将鼠标悬停在爆头之外或悬停在不同的爆头上时，尽管我有退出功能，但叠加层仍然会粘住。是什么赋予了？时不时会有人溜走，但这是例外而不是规则......

4

1 回答 1

0

在您的退出函数中，e.target 有时会使用“覆盖”类本身捕获 div，因此代码：

$(e.target).find('.overlay')

什么都不返回。

将您的退出功能修复为：

exit: function(e) {
    $(e.currentTarget).slideUp();
  }

这是一个很好的解释 - e.target 和 e.currentTarget 之间的区别

于 2013-10-13T22:41:51.267 回答