停止悬停()效应适用于每个div

Question

基本上，我想要实现的是，当我悬停在有一个矩形类的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。而不是其他的迪夫同时。希望这是合理的。我很感谢大家的时间。

Answer 1

问题在于，当mouseenter/mouseleave事件触发时，您将选择DOM中的每个mouseenter元素。若要解决此问题，请使用引发事件的元素中的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>

​

Answer 2

我个人倾向于采用只使用CSS的方法来解决这个问题，而根本不需要使用JS。

在这种情况下，使用这个CSS只会在.description的父节点悬停时显示它：

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

在下面没有JS的代码段中可以看到这一点：

​

.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>

​