jQuery .hover() 代码未执行答案

【问题标题】：jQuery .hover() code not executingjQuery .hover() 代码未执行
【发布时间】：2016-09-02 23:27:39
【问题描述】：

我希望我的 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/#&togetherjs=os0pjD0RNr

【问题讨论】：

浏览器控制台有错误吗？
@ronnyfm 根本没有。
当我执行 Run code sn -p 选项时颜色变为黄色。
似乎也对我有用.. jsfiddle.net/Hastig/4fjn0ndb 我想，不知道我悬停在它的所有空白上的是什么：P
我看到它也在工作，但奇怪的是，当我的所有其他代码都存在时，甚至没有调用悬停函数，即使它们不相关。另外，背景图像是否可能是它不起作用的原因？

标签： javascript jquery html css jquery-hover

【解决方案1】：

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

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

小提琴

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

【讨论】：

为什么要发布小提琴而不是堆栈 sn-p？点击“复制片段以回答”开始。
我通常会这样做。在这种情况下，我觉得使用小提琴中的代码更容易。无论如何，重要的代码都张贴在这里。如果需要，还会有更多内容，包括可能的堆栈 sn-p。
很奇怪，在我的完整代码中，函数根本没有运行。我放了一个 window.alert() 来测试它是否运行，但它没有。
也许发布一个包含更完整代码的小提琴来重新创建它（当你在这里发布太多但在小提琴中很好时他们不喜欢它）并更新你的答案，有人可以帮助你计算出来。我也会试试看的:)
@HastigZusammenstellen 我用小提琴更新了它，非常感谢！这里是：jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr

【解决方案2】：

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

您需要将top:0px; 放在您的.eventContents 中，因为它隐藏在顶部（至少对于本示例而言）

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

【讨论】：

【解决方案3】：

负的 z-index 是悬停不工作的原因，要修复它，请确保要悬停的元素的 z-index 为正。为避免影响顶部导航栏，请将导航栏移动到 html 代码文件的底部，使其自然地出现在其他所有内容之上，避免在 eventContain 上使用负 z-index。

【讨论】：