jquery悬停在图像上不起作用

jquery hover over image not working

本文关键字：不起作用 图像 悬停 jquery      更新时间：2023-12-23

当鼠标hover在right图像上时，我想更改主image的opacity，简单如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #main {
            opacity: 1;
        }
        #right {
            position: absolute;
            margin-left: -310px;
            margin-top: 320px;
            visibility: hidden;
        }
        #center {
            position: absolute;
            margin-left: -655px;
            margin-top: 20px;
            visibility: hidden;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#right").hover(function () {
                $("main").css("opacity","0.4");
                $("right").css("visibility","visible");
            }, function () {
                $("main").css("opacity","1");
                $("right").css("visibility","hidden");
            });
        });
    </script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>

但当CCD_ 5进入隐藏的CCD_。这里少了什么？

您不能将鼠标悬停在隐藏的元素上。您正在将事件绑定到#right
，即visibility:hidden
将right的css属性更改为：

#right {
         position: absolute;
         margin-left: -310px;
         margin-top: 320px;
     }

现在元素可以在DOM中看到，并且hover事件被触发

JSBIN

您在jQuery选择器中缺少#id

$(document).ready(function () {
        $("#right").hover(function () {
            $("#main").css("opacity","0.4");
            $("#right").css("visibility","visible");
        }, function () {
            $("#main").css("opacity","1");
            $("#right").css("visibility","hidden");
        });
    });

我已经解决了这个问题，而不是使用visibility: hidden;，我使用了opacity: 0;，这样做效果很好，谢谢大家的评论：）

尝试这个

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    #main {
        opacity: 1;
    }
</style>
<script>
    $(document).ready(function () {
        $("#right").hover(function () {
            $("#main").css("opacity","0.4");
            $("#right").css("visibility","visible");
        }, function () {
            $("#main").css("opacity","1");
            $("#right").css("visibility","hidden");
        });
    });
</script>
</head>
<body>
   <img id="main" src="img/1477253.jpg" />
   <img id="right" src="img/1477253.jpg" />
   <img id="center" src="img/Untitled-2.png" />
 </body>
 </html>

删除css类，即#right和#center，然后查看结果。由于此类，您无法看到图像。

您缺少#，隐藏元素意味着它不见了。无法将鼠标悬停在其上。请改用不透明度0。还有一点，你的图像位置可能不会在屏幕上显示图像，除非它很大，所以我对此进行了评论。

这是修改后的版本。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #main {
            opacity: 1.0;
        }
        #right {
            /*position: absolute;*/
            /*margin-left: -310px;*/
            /*margin-top: 320px;*/
            opacity: 0.0;
        }
        #center {
            /*position: absolute;*/
            /*margin-left: -655px;*/
            /*margin-top: 20px;*/
            opacity: 0.0;
        }
    </style>
     <script>
        $(document).ready(function () {
            $("#right").hover(function () {
                $("#main").css("opacity","0.4");
                $("#right").css("opacity","1.0");
            }, function () {
                $("#main").css("opacity","1");
                $("#right").css("opacity","0.0");
            });
        });
    </script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #main {
            opacity: 1;
        }
        #right {
            position: absolute;
            margin-left: -310px;
            margin-top: 320px;
            visibility: hidden;
        }
        #center {
            position: absolute;
            margin-left: -655px;
            margin-top: 20px;
            visibility: hidden;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#right").hover(function () {
                $("#main").css("opacity","0.4");
                $("#right").css("visibility","visible");
            }, function () {
                $("#main").css("opacity","1");
                $("#right").css("visibility","hidden");
            });
        });
    </script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>

使用这个。

$(document).ready(function () {
    $("#right").mouseover(function () {
        $("#main").css("opacity", "0.4");
        $("#right").css("opacity", "1");
    }).mouseleave(function () {
        $("#main").css("opacity", "1");
        $("#right").css("opacity", "0");
    });
});

DEMO

相关文章：