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>

上面的代码是一个测试HTML文件，其中jQuery不起作用，任何人都可以帮我找到解决问题的方法。我无法找到错误（我使用谷歌浏览器34.0.1847.137米）。

如果有人需要，这是CSS文件：

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

Answer 1

您使用的是过时版本的jQuery，更改为较新版本，它可以在Chrome中使用。

<强> jsBin demo

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

还只是对代码的一个小编辑：

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

没有jQuery，在CSS3中

<强> jsBin demo

.mydiv{
     /* your styles here */
     opacity: 0.5;
     transition: opacity 0.3s;
 }
 .mydiv:hover{
     opacity: 1;
 }

jQuery：鼠标事件不起作用

1 个答案: