12...and Get Yourself Out! DOESN'T WORK


#1

Oops, try again. It looks like you didn't set your div's opacity to 0.5. Check the example in the instructions if you need help!

https://www.codecademy.com/en/courses/web-beginner-en-bay3D/2/4?curriculum_id=50a3fad8c7a770b5fd0007a1


$(document).ready(function(){
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    });
    $('div').mouseleave(function() {
        $('div').fadeTo('fast', 0.5);
    });
});

Tried this

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).fadeTo('fast', 1);
    }).mouseleave(function(){
        $(this).fadeTo('fast', .5)
    });
});


Tried this one

$(document).ready(function(){
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    })
    $('div').mouseleave(function() {
        $('div').fadeTo('fast', 0.5);
    });
});


#2

the last one:

$(document).ready(function(){
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    })
    $('div').mousleave(function() {
        $('div').fadeTo('fast', 0.5);
    });
});

is pretty close, but you have mousleave it should be mouseleave.

I can't find why the first one is wrong (apart from the same spelling mistake)


#3

I changed the spelling mistake. Still doesn't work :wink:


#4

did you use the last one? in the first example:

$('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    }); // unnecessary semi-colon

you have a unnecessary semi-colon, see comment in code above

Did you follow the instructions on the full screen?

If problem persist, post an updated version of the code you are using


#5

$(document).ready(function(){
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    })
    $('div').mouseleave(function() {
        $('div').fadeTo('fast', 0.5);
    });
});

This is the updated version now using

With the same error "Oops, try again. It looks like you didn't set your div's opacity to 0.5. Check the example in the instructions if you need help!"

And yes; I'm following the instructions on the full screen :slight_smile:


#6

your code is now fine.

and if you follow the instructions, everything should be good

Maybe you need to refresh the page


#7

I'm following all the instructions and it still doesn't work.

And when I'm on the full screen, the button is not changing dark OR light.


#8

that is weird, can i see your html and css code?


#9

HTML

<html>
    <script type='text/javascript' src='script.js'></script>
	<head>
		<title>Button Magic</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
	</head>
	<body>
     <div><br/><strong>Click Me!</strong></div>   
	</body>
</html>

CSS

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 1;
}

#10

the <script></script> tags should be inside the head (<head></head>)


#11

HERO thanks for helping me :blush:

IT WORKS!


#12