HTML/Jquery: div 即使 z-index 设置为最高也没有检测到悬停？

Question

我遇到了一个奇怪的问题 - 在此处将包装器中的 div 分配给 class 名称：

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

在我的样式表中，div 周围的包装器的 z-index 为 -1，但我给 .about 的 z-index 为 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，不管你的 child z-index 是什么，任何兄弟元素带有 z-index > -1 的包装纸仍将覆盖您的包装纸的 children（我想，如果我错了，抱歉）

Answer 2

z-index 仅与 position property.Use hover() 方法一起使用，其中两个参数作为 mouseenter 和 mouseout 的函数传递。I如果对您有帮助，请尝试使用悬停，然后在此 link

上查看

HTML/Jquery: div 即使 z-index 设置为最高也没有检测到悬停？

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

html

javascript

css

jquery

hover