如何缩小与CSS

问题描述：

一个div我想一个div得到较大时mouseneter如何缩小与CSS

所以that's我的代码

脚本

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

你已经拥有的代码有用的部分，会好得多有一个演示寿 –

变焦比调整大小不同。但除此之外，它看起来像是在分配事件处理程序之后添加元素*，这意味着什么也不会发生。例如，查看使用jQuery的'on'委派事件，或确保在分配事件处理程序之前该元素存在。 –

我想要这样的东西[JSFiddle]（https://jsfiddle.net/LfLaz31m/1/）@MedetTleukabiluly – Lokes

答

下面是使用代码的部分例子：

只是修改到您的示例。确保你在代码的所有方面使用相同的选择器。

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

它不适用于我的代码 – Lokes

如何缩小与CSS

相关推荐