Question

我希望我的div在悬停在它们上方时改变颜色，但即使我正在悬停，代码也不会执行。我不完全确定原因，但我认为可能存在这样一个问题：我在我想要悬停的类上使用z-index。

带脚本的Html：

＆＃13;

$(".eventContents").hover(
  function() {
    $(".eventContents").css("background-color", "yellow");
  })


//making events square
    var cw = $('.eventContain').width();
    $('.eventContain').css({
        'height': cw + 'px'
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是小提琴，问题在这里更为突出： https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr

Answer 1

元素正在被正确悬停并且代码正在执行我已经测试过了，问题可能是你的元素是position:absolute;并且它们都是彼此重叠的，它们也没有有一个定义的height，这是必要的，因为我们讨论的是div元素而不是img，也许你想要更好地检查你的代码。

您需要将top:0px;添加到.eventContents，因为它隐藏在最顶层（至少在此示例中）

最后一件事，如果你想引用实际的悬停元素，你应该使用$(this)而不是类名，因为它将为所有带有类的元素执行代码而不仅仅是hovered之一。

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-index是悬停不起作用的原因，要修复它，确保要悬停的元素的z-index为正。为避免影响顶部导航栏，请将导航栏移动到html代码文件的底部，使其自然显示在其他所有内容之上，从而避免在eventContain上使用负z-index。

jQuery .hover（）代码未执行

3 个答案: