Jquery 鼠标悬停在 Div 类上

Question

我想添加鼠标悬停效果。它是一个具有相同 div 标签的产品部分，如果我将鼠标悬停在图像类上，我只想显示当前图像的标题，但它在鼠标悬停时显示所有标题。

以下代码在鼠标悬停时有效，但启用所有类名 = “highlight”。如果我将鼠标悬停在第一个 div =('top-section') 上，脚本应该只启用其中的第一个 class="highlight" 名称。

HTML

<div class ="featured">
    <div class="featured-section">
    <a href="#" class="featured-link">
    <div class="top-section">
        <img src="1.jpeg">
        <span class="highlight">
            <h3 class="title">title 1</h3>
        </span>
    </div>
    
    </a>
    </div>

   <div class="featured-section">
    <a href="#" class="featured-link">
    <div class="top-section">
        <img src="2.jpeg">
        <span class="highlight">
            <h3 class="title">title 2</h3>
        </span>
    </div>
    
    </a>
    </div>

   <div class="featured-section">
    <a href="#" class="featured-link">
    <div class="top-section">
        <img src="3.jpeg">
        <span class="highlight">
            <h3 class="title">title 3</h3>
        </span>
    </div>
    
    </a>
    </div>
</div>

脚本

  $(".top-section").on({
    mouseenter: function () {
      $(".highlight").addClass("show").fadeIn();

    },
    mouseleave: function () {
        $('.highlight').removeClass("show").fadeOut();
    }
});

Answer 1

问题是因为您在事件触发时选择了 DOM 中的所有 .highlight 元素。您只需选择与触发事件的.top-section 相关的那些。

为此，请在事件处理程序中使用 this 关键字来引用引发事件的元素，然后从那里使用 find()：

$(".top-section").on({
  mouseenter: function() {
    $(this).find(".highlight").addClass("show").fadeIn();
  },
  mouseleave: function() {
    $(this).find('.highlight').removeClass("show").fadeOut();
  }
});

.highlight { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featured">
  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="1.jpeg">
        <span class="highlight">
          <h3 class="title">title 1</h3>
        </span>
      </div>
    </a>
  </div>

  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="2.jpeg">
        <span class="highlight">
          <h3 class="title">title 2</h3>
        </span>
      </div>
    </a>
  </div>

  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="3.jpeg">
        <span class="highlight">
          <h3 class="title">title 3</h3>
        </span>
      </div>
    </a>
  </div>
</div>

话虽如此，值得注意的是，您的逻辑可以更有效地创建，并且仅使用 CSS 可以提高性能：

.highlight { 
  opacity: 0;
  height: 0px;
  display: block;
  transition: opacity 0.3s, height 0.3s;
}

.top-section:hover .highlight {
  opacity: 1;
  height: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featured">
  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="1.jpeg">
        <span class="highlight">
          <h3 class="title">title 1</h3>
        </span>
      </div>
    </a>
  </div>

  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="2.jpeg">
        <span class="highlight">
          <h3 class="title">title 2</h3>
        </span>
      </div>
    </a>
  </div>

  <div class="featured-section">
    <a href="#" class="featured-link">
      <div class="top-section">
        <img src="3.jpeg">
        <span class="highlight">
          <h3 class="title">title 3</h3>
        </span>
      </div>
    </a>
  </div>
</div>

Answer 2

你可以这样做：

$(".top-section").on({
    mouseenter: function () {
      // .children() creates a jquery object containing all the childrens of the 
      // current instance of .top-sector, .last() selects the last of them
      $(this).children().last().addClass("show").fadeIn();

    },
    mouseleave: function () {
        $(this).children().last().removeClass("show").fadeOut();
    }
});