Question

尝试使用这些jQuery方法来显示它所描述的图像悬停的描述....如果我没有将描述显示设置为none，那将会有效，在这种情况下，doc会以所有描述显示，但是然后将鼠标悬停和鼠标移开时显示和隐藏它们（所有这些）。但我希望隐藏描述直到第一次鼠标悬停。我也遇到了匹配图像/描述悬停到每个实例的问题。我是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>

如果我希望这只适用于图像/描述对的实例，我应该添加一些。这个东西，不是吗？

Answer 1

结帐解决方案

JS PART ：更改jQuery选择器

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

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

CSS PART ：没有变化

.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(); });

第一个参数是鼠标悬停时执行的功能，鼠标输出时执行第二个功能。

Mouseover和Mouseout的行为不符合预期

2 个答案: