jQuery and CSS Hover Effects Won't Work

Question

I don't understand what is wrong, as similar code has worked for me before. I've created a div tag and styled it. But for some reason the hover feature in CSS doesn't affect it, and I tried adding jQuery code but the .mouseenter/.animate features don't work with it either. You can see the result of the code at this link.

The HTML code:

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

The CSS code:

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' ;
}

The JavaScript/jQuery code:

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

    }) ;

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

    }) ;    
});

In javascript, you need to quote object keys if they contain special characters - background-color -> "background-color" — Sam Dufel
– Sam Dufel, Commented Jun 3, 2014 at 17:31
Start learning how to use the browser's console to debug errors. — j08691
– j08691, Commented Jun 3, 2014 at 17:32
Well the legit method should be this: ({backgroundColor:'#FEFFBF'}); — Riskbreaker
– Riskbreaker, Commented Jun 3, 2014 at 18:16

Jay Blanchard · Accepted Answer · 2014-06-03 17:38:51Z

1

Your code (if you use the browser's console to help you troubleshoot you'll see this) has some syntax errors:

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

Once the semi-colons are removed and your keys are quoted your code should not throw syntax errors.

answered Jun 3, 2014 at 17:38

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EasyBB Over a year ago

Also a good note to state that any hyphenated property will become camel case and is better to use camel case since jquery uses another object to help the instance and by doing it camel case it's using javascript native property. backgroundColor

Sam Dufel · Accepted Answer · 2014-06-03 17:40:23Z

1

There are two problems here:

CSS

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

You placed quotes around the color string here, which is not valid CSS. Remove the quotes, and the CSS hover will work correctly.

jQuery

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

You're passing an invalid object to jQuery.animate - javascript object keys must either be legal javascript identifiers, or be quotes strings. The - character can't be used as part of an identifier, so you need to quote the keys.

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

answered Jun 3, 2014 at 17:40

Sam Dufel

17.6k3 gold badges51 silver badges52 bronze badges

Comments

Riskbreaker · Accepted Answer · 2014-06-03 18:11:29Z

0

Yes as mentioned you had this wrong:

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

Should be:

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

As far as animate Change your jquery to this (500 is just an example of the animation speed):

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

Here is a FIDDLE

answered Jun 3, 2014 at 18:11

Riskbreaker

4,7911 gold badge25 silver badges31 bronze badges

Comments

Kirgan · Accepted Answer · 2014-06-03 17:31:26Z

-1

Why don't do it in pure 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
}

answered Jun 3, 2014 at 17:31

Kirgan

621 silver badge6 bronze badges

1 Comment

Kirgan Over a year ago

Just tried to bring a better solution to his question.

Collectives™ on Stack Overflow

jQuery and CSS Hover Effects Won't Work

4 Answers 4

1 Comment

CSS

jQuery

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

CSS

jQuery

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related