Menu
It works in the codeacademy.com website but not in my text file. The following html, css and jquery are supposed to make the div boxes shrink and grown when you mouse hover over them. But they dont. Whats wrong with it? I even tried linking the google hosted java thingy (4th line in the html) and it doesn’t say to necessarily do that. But even that didn’t help.
Here’s the html :
<!DOCTYPE html>
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
<title>Magic!</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”/>
<script type=”text/javascript” src=”script.js”></script>
</head>
<body>
<div id=”red”></div>
<div id=”blue”></div>
<div id=”yellow”></div>
<div id=”green”></div>
</body>
</html>
And here’s the css :
div {
height:100px;
width:100px;
display: inline-block;
}
#red {
background-color:#FF0000;
}
#blue {
background-color:#0000FF;
}
#yellow {
background-color:#E2BE22;
}
#green {
background-color:#008800;
}
And lastly, here’s the java :
$(document).ready(function() {
$(‘div’).mouseenter(function() {
$(this).animate({
height: ‘+=10px’
});
});
$(‘div’).mouseleave(function() {
$(this).animate({
height: ‘-=10px’
});
});
$(‘div’).click(function() {
$(this).toggle(1000);
});
});