jQuery: mouse events aren't working

StackOverflow https://stackoverflow.com/questions/23688100

  •  23-07-2023
  •  | 
  •  

Question 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script>

    <script>
        $(document).ready(function() {
            $('.mydiv').mouseenter(function() {
                $('.mydiv').fadeTo('fast', 1);
            });
            $('.mydiv').mouseleave(function() {
                $('.mydiv').fadeTo('fast', 0.5);
            });
        });
    </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>


<body>
     <div class="mydiv"><br><strong>Click Me!</strong></div>   

</body>
</html>

The code above is a test HTML file in which the jQuery isn't working, could anybody help me find a solution to my problem. I can't find the error (I use Google Chrome 34.0.1847.137 m).

If anybody needs, this is the CSS file:

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana;
    opacity: 0.5;
}
Était-ce utile?

La solution

You're using an outdated version of jQuery, change to a newer version and it will work in Chrome.

jsBin demo

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Also just a small edit to your code:

$(function() { // DOM ready shorthand
    $('.mydiv').hover(function( e ) {
         $(this).stop().fadeTo(300, e.type=="mouseenter"?1:0.5);
    });
});

Without jQuery, in CSS3

jsBin demo

.mydiv{
     /* your styles here */
     opacity: 0.5;
     transition: opacity 0.3s;
 }
 .mydiv:hover{
     opacity: 1;
 }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top