Question

我希望在opacity图片上的鼠标image简单时更改主hover的{{1}}：

right

但是当<!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>隐藏mouse图片时，没有任何事情发生。这里缺少什么？

Answer 1

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

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

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

JSBIN

Answer 2

你缺少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");
        });
    });

Answer 3

我已经解决了这个问题，而不是使用visibility: hidden;我使用opacity: 0;这种方式工作正常，感谢评论人员：）

Answer 4

试试这个

<!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并查看结果。由于此课程，您无法看到图像。

Answer 5

你缺少＃而隐藏的元素意味着它消失了。你不能让鼠标悬停在它上面。请改用不透明度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>

Answer 6

<!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>

Answer 7

使用此功能。

$(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

jquery悬停在图像上不起作用

7 个答案: