Код 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>

Вот скрипка, проблема здесь более заметна: https://jsfiddle.net/jakexia72/x7jLp17z/

Answer 1

Отрицательный z-индекс является причиной того, что наведение не работает, чтобы исправить это, убедитесь, что z-индекс элемента, над которым вы хотите навести курсор, является положительным. Чтобы избежать влияния на верхнюю навигационную панель, переместите навигационную панель в конец HTML-файла кода, чтобы он естественным образом появлялся поверх всего остального, избегая необходимости использовать отрицательный z-индекс для eventContain.

Answer 2

Элементы правильно отображаются, и код выполняется. Я проверил его, возможно, проблема в том, что ваши элементы position:absolute; и они все друг на друга, также они не имеют определенного height и это необходимо, потому что мы говорим о элементах не img, может быть, вы хотели бы проверить свой код немного лучше.

Вы хотите поставить top:0px; на ваш .eventContents потому что он скрыт сверху (по крайней мере, для этого примера)

И последнее: если вы хотите сослаться на фактический элемент наведения, вы должны использовать $(this) вместо имени класса, потому что он будет выполнять код для всех элементов класса, а не только для hovered.

Answer 3

Кажется, это работает для меня, если я правильно понял, но вот способ наведения и включения и выключения и использования this вместо .eventContents в два раза больше..

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

играть на скрипке

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