jQuery .hover() код не исполняется

Question

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

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/#&togetherjs=os0pjD0RNr

Answer 1

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

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

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

Answer 2

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

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

скрипку

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

Answer 3

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