javascript - 如何用CSS缩放一个div

Question

我想让一个 div 在 mouseneter 时变大

这就是我的代码

脚本

  $(document).ready(function () {
   $(".header div").mouseleave(function () {
       $(this).stop().animate({
           height: "50px"
       }, 600);
   });

   $(".header div").mouseenter(function () {
       $(this).stop().animate({
           height: "100px"
       }, 600);
   });
 })

   menu += "<div class='row ftContainerOut header'><div class='col-md-12 ftContainer header'><div class='row ftHeader'><div class='col-xs-9 t09'>" + items[item].Title + "</div><div class='col-xs-3 text-right'></div></div><div class='row'><div class='col-xs-6' style='padding-top:10px'><img src='" + items[item].Imagen.Url + "' class='img-responsive img-center' style='border:0px solid blue; max-width:150px;max-height:120px;' /></div><div class='col-xs-6'>" + spec + "</div></div></div></div>";

和CSS

#header_div {
width:100%;
height:100px;
background-color:#ffffff;
position:fixed;
top:0;
left:0;
}

#header_div {
max-height: 100%;
max-width: 100%;
}

但是当我输入鼠标时没有任何反应，知道为什么吗？

想法是这样的JsFiddle

Answer 1

这是一个使用部分代码的示例:

只需将此修改为您的示例。确保您在代码的所有方面都使用相同的选择器。

$(document).ready(function() {
  $(".header").mouseleave(function() {
    $(this).stop().animate({
      height: "50px"
    }, 600);
  });

  $(".header").mouseenter(function() {
    $(this).stop().animate({
      height: "100px"
    }, 600);
  });
});

.header {
  width: 50px;
  height:50px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>