CODEWITHSUNDEEP
jqueryhtmlcss
Newspire
Newspire

Reputation: 104

jQuery and CSS Hover Effects Won't Work

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

    }) ;    
});

Upvotes: 1

Views: 228

Answers (4)

Riskbreaker
Riskbreaker

Reputation: 4791

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

Upvotes: 0

Sam Dufel
Sam Dufel

Reputation: 17598

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

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34416

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.

Upvotes: 1

Kirgan
Kirgan

Reputation: 62

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
}

Upvotes: -1

Related Questions