Question

我遇到了一个奇怪的问题 - 在这里将一个div分配给一个类名：

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

在我的样式表中，这个div周围的包装器的z-index为-1，但是我给出了一个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");

        });

});

我知道这是在执行因为＆＃34; LOADED＆＃34;打印到控制台。但是我无法更改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是什么，任何兄弟元素要包装{{1仍然会超过你的包装好的孩子（我想，如果我错了，我很抱歉）

Answer 2

z-index仅与position属性一起使用。使用hover()方法将两个参数作为mouseenter和mouseout的函数传递。我尝试使用悬停，如果对您有帮助，然后在link

上查看它

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

2 个答案: