CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abanoub
Abanoub

Reputation: 3809

jquery hover over image not working

I want to change the opacity of the main image when the mouse hover on the right image simple as that:

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

but when the mouse get on the hidden right image nothing happen. what am missing here?

Upvotes: 0

Views: 625

Answers (7)

Anthony Carbon
Anthony Carbon

Reputation: 618

Use this.

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

Upvotes: 0

Ravi Chauhan
Ravi Chauhan

Reputation: 1458

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

Upvotes: 0

spicydog
spicydog

Reputation: 1714

You are missing # and hidden element means it is gone. You cannot get mouse hover on it. Use opacity 0 instead. Another point, your image position may not show image on the screen, except it is very large, so I comment it.

Here is the modified version.

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

Upvotes: 0

Ajay
Ajay

Reputation: 6590

try this

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

Remove css class i.e #right and #center and see the result. Due to this class you are not able to see the image.

Upvotes: 0

Abanoub
Abanoub

Reputation: 3809

I have solved it , instead of using visibility: hidden; I used opacity: 0; and this way it worked fine , thanks for the comments guys :)

Upvotes: 0

StateLess
StateLess

Reputation: 5402

You cannot hover over a hidden element.You are binding event to #right
which is visibility:hidden
change css properties of right to:

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

now the element can be seen in DOM and hover event is triggered

JSBIN

Upvotes: 1

Joe Fitter
Joe Fitter

Reputation: 1309

you are missing the # id in the jQuery selector

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

Upvotes: 0

Related Questions