Question

我不明白出了什么问题，因为类似的代码以前对我有用。我已经创建了一个div标签并对其进行了设计。但由于某些原因CSS中的悬停功能不会影响它，我尝试添加jQuery代码，但.mouseenter / .animate功能也无法使用它。您可以在this link找到代码的结果。

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>

CSS代码：

html{
background-color : #000000 ;
}

div{
position : absolute ;
height : 50px ;
width : 50px ;

top : 50% ;
left : 50% ;

border : 1px solid #FFFF00;
border-radius : 50% ;

background-color : #FEFFBF ;
box-shadow : 0 0 40px #FEFFBF;
}

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

JavaScript / jQuery代码：

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

    }) ;

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

    }) ;    
});

Answer 1

您的代码（如果您使用浏览器的控制台来帮助您排查问题并且会看到此问题）会出现一些语法错误：

$(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'          
        }) ;
    }) ;
});

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

Answer 2

这里有两个问题：

CSS

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

你在这里的颜色字符串周围放置引号，这是无效的CSS。删除引号，CSS悬停将正常工作。

的jQuery

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

您将无效对象传递给jQuery.animate - javascript对象键必须是合法的javascript标识符，或者是引号字符串。 -字符不能用作标识符的一部分，因此您需要引用键。

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

Answer 3

是的，如上所述你错了：

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

应该是：

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

至于动画将您的jquery更改为此（500只是动画速度的一个示例）：

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

这是FIDDLE

Answer 4

为什么不用纯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
}

jQuery和CSS悬停效果不起作用

4 个答案:

CSS

的jQuery