停止将 hover() 效果应用于每个 div答案

【问题标题】：Stop hover() effect applying to every div停止将 hover() 效果应用于每个 div
【发布时间】：2021-09-27 06:28:21
【问题描述】：

基本上，我想要实现的是，当我将鼠标悬停在具有矩形类的 div 上时，它应该显示具有描述类的 div。一开始，描述显示值为“无”。但是当我将它悬停在 div 上时，它应该会显示出来。

var $projectOneHtml = $(".hTML-1")
var $projectTwoHtml = $(".hTML-2")
var $projectThreeHtml = $(".hTML-3")

function myName(x) {
  $(x).hover(function() {
    $(".description").show();
    $(this).addClass("hover");
  }, function() {
    $(".description").hide();
    $(this).removeClass("hover");
  })
};

myName($projectOneHtml);
myName($projectTwoHtml);
myName($projectThreeHtml);

.description {
  background-color: white;
  border: 1px solid white;
  width: 354px;
  height: 300px;
  text-align: center;
  color: black;
  font-size: 18px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
  <div class="rectangle hTML-1">
    <img src="Projects/card.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle hTML-2">
    <img src="Projects/clock.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle hTML-3">
    <img src="Projects/canvas.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>
</div>

问题是：当我悬停时，它会影响三个 div。我想要的是当我悬停第一个 div 时，它应该显示描述 div。不是同时的其他 div。希望这是有道理的。感谢大家的时间。

【问题讨论】：

您不应该依赖唯一的类名，也不应该为每个单独的类名调用该函数。请参阅无数其他 examples，了解如何利用 $(this) 和 DOM 遍历。

标签： javascript html jquery css

【解决方案1】：

问题是因为当 mouseenter/mouseleave 事件触发时，您选择了 DOM 中的每个 .description 元素。要解决此问题，请使用引发事件的元素中的 find() 以仅影响该元素的子元素。

另外请注意，我删除了增量类名的使用。这是一种反模式，它首先完全否定了类的目的；即按共同行为对元素进行分组。

$('.rectangle').hover(function() {
  $(this).addClass('hover').find(".description").show();
}, function() {
  $(this).removeClass("hover").find('.description').hide();
});

.description {
  background-color: white;
  border: 1px solid white;
  width: 354px;
  height: 300px;
  text-align: center;
  color: black;
  font-size: 18px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
  <div class="rectangle">
    <img src="Projects/card.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle">
    <img src="Projects/clock.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle">
    <img src="Projects/canvas.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>
</div>

话虽如此，单独使用 CSS 创建这种逻辑要好得多，因为它的性能远优于 JS。试试这个替代方案：

.description {
  background-color: white;
  border: 1px solid white;
  width: 354px;
  height: 300px;
  text-align: center;
  color: black;
  font-size: 18px;
  display: none;
}

.rectangle:hover .description {
  display: block;
}

<div class="projects">
  <div class="rectangle">
    <img src="Projects/card.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle">
    <img src="Projects/clock.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle">
    <img src="Projects/canvas.jpg" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我个人更倾向于使用纯 CSS 的方法，而完全不使用 JS。

在这种情况下，使用此 CSS 将仅在其父级悬停时显示 .description：

div.rectangle:hover > .description {
  display: block;
}

这可以在下面没有JS的sn-p中看到：

.description {
  background-color: white;
  border: 1px solid white;
  width: 354px;
  height: 300px;
  text-align: center;
  color: black;
  font-size: 18px;
  display: none;
}

div.rectangle:hover > .description {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
  <div class="rectangle hTML-1">
    <img src="//via.placeholder.com/354x180" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle hTML-2">
    <img src="//via.placeholder.com/354x180" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>

  <div class="rectangle hTML-3">
    <img src="//via.placeholder.com/354x180" width="354px" height="180px">
    <div class="description">
      <p>A simple business card was created by HTML and CSS.</p>
    </div>
  </div>
</div>

【讨论】：