HTML / Jquery：即使z-index设置为最高，div也不会检测到悬停？

Question

I am having an odd problem - have a div within wrapper assigned to a class name here:

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

In my stylesheet, the wrapper around this div has a z-index of -1 but I have given .about a z-index of 5 (so it will definitely be above all other elements). I have even tried deleting the z index given to my wrapper but my problem still persists.

My problem is that I am trying to change content of div on hover using this script:

$(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");

        });

});

I know this is executing because "LOADED" is printed to console. However I cannot change the div's text because .about is not detecting hover. The log within the hover function is not printed.

I've never had this before - why won't my div detect hover?

EDIT- I have tried:

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

and

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

Nothing is printed when I hover over it. I have also deleted the z index on my wrapper if that should affect anything

Answer 1

您可以尝试$(".about").on("mouseover", function(){})也许，但我想如果你的包装器有-1 z-index ，不管你的孩子z-index是什么，任何兄弟姐妹使用z-index > -1的包装器的元素仍将覆盖你的包装器的子节点（我想，对不起，如果我错了）

Answer 2

z-index仅与position属性一起使用。使用hover()方法，将两个参数作为mouseenter和mouseout函数传递。我尝试使用悬停，如果这对你有帮助，那么在这个链接上检查它