How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme?
If anyone knows a solution, please check out my jsfiddle as it's not working as I intended.
Here is the JavaScript code:
$(document).ready(function(){
$('#hoverme').on('mouseover', function(){
$('#header').css('height', '500px');
});
$('#header').on('mouseout', function(){
$('#header').css('height', '100px');
});
});
The HTML code:
<div id="header">
<div id="hoverme">hover over me</div>
</div>
The CSS code:
#header {
height:100px;
border:1px solid red;
}