Question

我希望当mouseneter

时div变大

所以这就是我的代码

脚本

  $(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

1 个答案:

答案 0 :(得分：0)

Answer 1

以下是使用部分代码的示例：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何用css缩放div

1 个答案: