javascript - 编辑div高度后鼠标离开

当我将鼠标悬停在#hoverme上时，我希望#header更改高度。但是，一旦鼠标离开#hoverme，我也希望它恢复正常。

有谁知道如何做到这一点？我的jsfiddle似乎无法正常工作。

JAVASCRIPT

$(document).ready(function(){
  $('#hoverme').on('mouseover', function(){
    $('#header').css('height', '500px');
  });

  $('#header').on('mouseout', function(){
    $('#header').css('height', '100px');
  });
});

HTML

<div id="header">
  <div id="hoverme">hover over me</div>
</div>

CSS

#header {
    height:100px;
    border:1px solid red;
}

最佳答案

在mouseout处也要使用#hoverme:

$(document).ready(function(){
  $('#hoverme').on('mouseover', function(){
    $('#header').css('height', '500px');
  });

  $('#hoverme').on('mouseout', function(){
    $('#header').css('height', '100px');
  });
});

并将div的hoverme更改为span，以便不使用整行:

  <span id="hoverme">
    hover over me
  </span>

新的fiddle