javascript - jQuery .hover() 代码未执行

Question

我希望我的 div 在悬停在它们上面时改变颜色，但是即使我悬停时代码也没有执行。我不完全确定为什么，但我认为我在要悬停的类上使用 z-index 可能存在问题。

带脚本的 HTML:

$(".eventContents").hover(
  function() {
    $(".eventContents").css("background-color", "yellow");
  })


//making events square
    var cw = $('.eventContain').width();
    $('.eventContain').css({
        'height': cw + 'px'
    });

.eventContain {
  position: relative;
  margin-bottom: 10px;
  z-index: -1;
  background-size: cover;
}
.eventContents {
  color: white;
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.eventContents h2 {
  font-size: 2em;
  font-family: 'Montserrat', sans-serif;
}
.eventContents p {
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="events">
  <row>
    <div class="col-sm-4">
      <div class="eventContain" style="background-image:url(img/events/leaf.jpg)">
        <div class="eventContents">
          <h2 class="eventName">Title of Event</h2>
          <p>short description goes about here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="eventContain" style="background-image:url(img/events/12.jpg)">
        <div class="eventContents">
          <h2 class="eventName">Title of Event</h2>
          <p>short description goes about here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="eventContain" style="background-image:url(img/events/1.jpg)">
        <div class="eventContents">
          <h2 class="eventName">Title of Event</h2>
          <p>short description goes about here.</p>
        </div>
      </div>
    </div>
  </row>

</section>

这是 fiddle ，这里的问题比较突出: https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr

Answer 1

如果我理解正确的话，它似乎对我有用，但这里有一种方法可以将鼠标悬停在打开和关闭之间，并使用 this 而不是 .eventContents 两次。

$('.eventContents').hover(
  function() {
    $(this).css('background-color', 'yellow');
  }, 
  function() {
    $(this).css('background-color', 'red');
  }
);

fiddle

https://jsfiddle.net/Hastig/4fjn0ndb/1/