javascript - HTML/Jquery : div not detecting hover even when z-index set to highest?

Question

我遇到了一个奇怪的问题 - 包装器中有一个 div 分配给了这里的类名:

echo '<div class="about">Z&S</div>';

在我的样式表中，这个 div 周围的包装器的 z 索引为 -1，但我给 .about 的 z 索引为 5(所以它肯定会高于所有其他元素)。我什至尝试删除给我的包装器的 z 索引，但我的问题仍然存在。

我的问题是我试图使用此脚本更改悬停时 div 的内容:

$(document).ready(function() {
    console.log("LOADED SCRIPT.JS");

    //Change creds text
    $(".about").hover(
        function() // on mouseover
        {


    console.log("RAN IT");
            $(this).text("This is the new html");
        }, 

        function() // on mouseout
        {
            $(this).text("Z&Snnn");

        });

});

我知道它正在执行，因为“LOADED”被打印到控制台。但是我无法更改 div 的文本，因为 .about 没有检测到悬停。不打印悬停功能内的日志。

我以前从未遇到过这种情况 - 为什么我的 div 检测不到悬停？

编辑-我已经尝试过:

$(".about").on("mouseover", function(){
 console.log("HELLO");
 })

和

$(document).on("mouseover",".about", function(){
            console.log("RAN IT");
            $(this).text("This is the new html");
});

当我将鼠标悬停在它上面时，什么也没有打印。我还删除了包装器上的 z 索引(如果这会影响任何内容)

Answer 1

你可以尝试 $(".about").on("mouseover", function(){}) 也许，但我认为如果你的包装器有 -1 z-index ，无论您的子 z-index 是什么，使用 z-index > -1 包装的任何同级元素仍将位于您包装器的子级之上(我想，如果我错了，抱歉)