在我的页面上动态创建了几百个div,因为它们在N px中具有不同的固定宽度。
F.e。一对夫妇:
<div class='show' style='width:121px'></div>
<div class='show' style='width:13px'></div>
<div class='show' style='width:58px'></div>
等
在我的CSS中,我尝试进行转换:
<style type="text/css">
.show {
float: left;
background: rgba(120,120,120,0.5);
transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s;
}
.show:hover {
width:300px;
height:200px;
}
</style>
当然,这适用于高度,但宽度不适用,因为它是固定的。
即使是固定宽度,是否可以获得效果? 如果没有,你能告诉我如何解决这个问题吗?
答案 0 :(得分:0)
你可能很讨厌并用!important
编写你的CSS规则:
.show {
width:300px !important;
height:200px;
}
但更好的方法是使用jQuery来定位它们,但是如果动态添加这些div,则使用等待它们加载到DOM中的事件来执行此操作。
$('.show').css('width', '300px');