JS中的懸停/滑動函數，我做錯了嗎？

Question

因此，我有一些如下所示的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％，但我認為這會占用圖片的寬度和高度headshot父元素（如果我將其設置為100％）。 但是，當我將鼠標懸停在大頭照或其他大頭照上時，盡管我有退出功能，但覆蓋仍然會粘住。 是什么賦予了？ 時不時地會有人溜走，但這是例外，而不是規則。

Answer 1

在退出函數中，e.target有時會使用“ overlay”類本身捕獲div，因此代碼如下：

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

什么也不返回。

將您的退出功能修復為此：

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

這是一個很好的解釋-e.target和e.currentTarget之間的區別