Question

当我将鼠标悬停在#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;
}

Answer 1

mouseout使用#hoverme：

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

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

并将div的{{1}}更改为hoverme，以便不使用整行：

span

新的fiddle

Answer 2

不确定你的意思＆＃34;按预期工作＆＃34;，但试试这个：

$(function(){

var hdr = $('#header');
hdr.mouseenter(function(){
  hdr.css('height', '500px');
});
hdr.mouseleave(function(){ 
  hdr.css('height', '100px');
});

});

编辑div高度后鼠标离开

2 个答案: