Mouseover 和 Mouseout 的行为不符合预期

Question

尝试使用这些 jQuery 方法在它所描述的图像的悬停时显示描述......然后将在鼠标悬停和鼠标悬停时显示和隐藏它们（全部）。但我希望在第一次鼠标悬停之前隐藏描述。我也遇到了将图像/描述悬停与每个实例匹配的问题。我是 OOP 的新手，但我认为这在这里会派上用场。无论如何，任何提示都表示赞赏！

这是我的代码：

    $('.image').mouseover(function() {
      $('.description').show();
    })
    
    $('.image').mouseout(function() {
      $('.description').hide();
    })

    .col-lg-3 h2 {
      font-size: 1.1em;
      color: black;
      font-family: 'Arial';
      margin-left: .1em;
      font-weight: 500;
      display: none;
    
    }
    
    .col-lg-3 p {
      font-size: .9em;
      margin-left: .2em;
      margin-top: -.3em;
      font-weight: 400;
      display: none;

      <div class="col-lg-3 project1">
        <a class = "image" href="" target="_blank"> <img width="100%" height="100%" src="" alt=""></a> 
        <div class = "description">
          <h2>  </h2> 
          <p>  </p>
        </div>

如果我希望它仅适用于图像/描述对的实例，我可能也应该添加一些 .this 东西，不是吗？

Answer 1

查看以下解决方案

JS PART：更改 jQuery 选择器

$('.image').mouseover(function() {
  $('.description *', $(this).parent()).show();
})

$('.image').mouseout(function() {
  $('.description *', $(this).parent()).hide();
})

CSS 部分：没有变化

.col-lg-3 h2 {
  font-size: 1.1em;
  color: black;
  font-family: 'Arial';
  margin-left: .1em;
  font-weight: 500;
  display: none;

}

.col-lg-3 p {
  font-size: .9em;
  margin-left: .2em;
  margin-top: -.3em;
  font-weight: 400;
  display: none;
}

HTML PART：添加正确的结尾</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 ye">
            <a class = "image" href="targethere" target="_blank"> <img width="10%" height="10%" src="http://srdtu.org/assets/img/events/quiz-.jpg.jpg" alt="quiz"></a> 
            <div class = "description">
            <h2> quiz </h2> 
            <p> a quote guessing game </p>
            </div>
      </div>

Answer 2

不要使用 mouseout 和 mouseover。在使用这些功能时，您需要考虑很多事情。我建议您使用悬停功能。..

$('.image').hover(function() { $('.description').show(); }, function() { $('.description').hide(); });

第一个参数是鼠标悬停时执行的函数，第二个参数是鼠标移出时执行的函数。