Bug – jQuery Events


#1


https://www.codecademy.com/courses/web-beginner-en-JwhI1/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1#

My Code works fine, I can see the hover effect (background-color changing) on all menu items, but I cant complete the lesson. Instead I get: "Oops, try again. It does't look like your background color changed, is your hover adding the class active?"


HTML:
<!DOCTYPE html>
<html>
	<head>
		<title>Ghostly Divs</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div>Home</div>
        <div>About Us</div>
        <div>Contact</div>   
	</body>
</html>

CSS:
div {
    border-radius: 5px;
    background-color: #ABCDEF;
    transition: background-color 0.5s ease;
    display:inline;
    font-size:25px;
    padding:20px;
    border:1px solid #ccc;
    margin-top:10px;
}

.active {
    background-color:#556677;
}

jQuery:
$(document).ready(function() {
    
    $('div').hover(function() {
        
        $(this).addClass("active");
    },
    
    function(){
        
        $(this).removeClass("active");   
        
    });
});

A quick fix would be much appreciated.
Thanks.


#2

After clicking on the Save and submit button you must follow the instruction below next to Back to editor button.


#3

Works like a charm. Thank you. :]


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.