jQuery和CSS悬停效果获胜'；行不通_Jquery_Html_Css

jQuery和CSS悬停效果获胜'；行不通

jquery html css

jQuery和CSS悬停效果获胜'；行不通,jquery,html,css,Jquery,Html,Css,我不明白哪里出了问题，因为类似的代码以前也适用于我。我已经创建了一个div标记并对其进行了样式化。但由于某些原因，CSS中的悬停功能并不影响它，我尝试添加jQuery代码，但是.mouseenter/.animate功能也不能与之配合使用。您可以在上看到代码的结果 HTML代码： <head> <meta charset="utf-8"> <meta name="description" content="This is intended as a

我不明白哪里出了问题，因为类似的代码以前也适用于我。我已经创建了一个div标记并对其进行了样式化。但由于某些原因，CSS中的悬停功能并不影响它，我尝试添加jQuery代码，但是.mouseenter/.animate功能也不能与之配合使用。您可以在上看到代码的结果

HTML代码：

<head>

    <meta charset="utf-8">
    <meta name="description" content="This is intended as a page to test different designs and layouts.">
    <link rel="stylesheet" href="testStyle.css" type="text/css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type = "text/javascript" src = "test.js"></script>

    <title>
        Test 1
    </title>

</head>

<body>

        <div></div>

</body>

JavaScript/jQuery代码：

$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).animate({
            background-color : '#0000FF' ;
    }) ;

    }) ;

    $('div').mouseleave(function(){
        $(this).animate({
            background-color : '#FEFFBF' ;           
        }) ;

    }) ;    
});

为什么不在纯CSS3中实现呢

.div{
    -webkit-transition: all 0.75s 0.33s;
    -moz-transition: all 0.75s 0.33s;
    transition: all 0.75s 0.33s;
}

.div:hover{
  background-color:#blue; //for example
}

您的代码（如果您使用浏览器的控制台帮助您进行故障排除，您将看到这一点）有一些语法错误：

$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).animate({
        'background-color' : '#0000FF' // ; remove the trailing semi-colon and quote the 'background-color'
        }) ;    
    }) ;

    $('div').mouseleave(function(){
        $(this).animate({
        'background-color' : '#FEFFBF' // ; remove the trailing semi-colon and quote the 'background-color'          
        }) ;
    }) ;
});

删除分号并引用键后，代码不应抛出语法错误。

这里有两个问题：

CSS 您在此处的颜色字符串周围加了引号，这是无效的CSS。删除引号，CSS悬停将正常工作

jQuery 您正在向jQuery.animate传递一个无效的对象-javascript对象键必须是合法的javascript标识符，或者是引号字符串。

字符不能用作标识符的一部分，因此需要引用密钥

$(this).animate({
    'background-color' : '#0000FF'
}) ;

是的，如前所述，你错了：

div:hover{
    background-color : '#0000FF' ;
}

应该是：

 div:hover{background-color : #0000FF;}

只要设置动画将jquery更改为此（500只是动画速度的一个示例）：

在javascript中有一个

，如果对象键包含特殊字符-

背景色

“背景色”

开始学习如何使用浏览器控制台调试错误。正确的方法应该是：

（{backgroundColor:'#FEFFBF'}）

还有一点值得注意，即任何连字符的属性都将变成camel-case，最好使用camel-case，因为jquery使用另一个对象来帮助实例，并且通过使用camel-case，它使用的是javascript本机属性

backgroundColor

只是试图为他的问题提供更好的解决方案。

$(this).animate({
    'background-color' : '#0000FF'
}) ;

div:hover{
    background-color : '#0000FF' ;
}

 div:hover{background-color : #0000FF;}

$('div').hover(function () {
    $(this).stop().animate({backgroundColor:'#0000FF'}, 500);
}, function () {
    $(this).stop().animate({backgroundColor:'#FEFFBF'}, 500);
});