动态变化高度的元素的子元素的height:inherit 不起作用
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.box{ position:relative; height:100px; width:120px; margin-left:10px; float:left; }
.bar{ height:0; width:100%; background:white; position: absolute; }
.bar a{
display:block;
height:inherit;
}
</style>
</head>
<body>
<div>
<div class="box">
<div class="bar"> <a href=""> Create </a>
</div>
<img src="http://p0kqyo0p7.bkt.clouddn.com/14.png?imageView2/1/w/120/h/100" />
</div>
<div class="box">
<div class="bar"> <a href=""> Create </a>
</div>
<img src="http://p0kqyo0p7.bkt.clouddn.com/14.png?imageView2/1/w/120/h/100" />
</div>
<div class="box">
<div class="bar"> <a style=";height:inherit">Create</a>
</div>
<img src="http://p0kqyo0p7.bkt.clouddn.com/14.png?imageView2/1/w/120/h/100" />
</div>
</div>
<script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.box').each(function(){
var box=this;
$(this).hover(
function (){
$(box).find('.bar').animate({
'height' : '25px'
},'fast');
},
function (){
$(box).find('.bar').animate({
'height' : '0px'
},'fast');
}
);
});
});
</script>
</body>
</html>
期望.bar与 .bar a 的高度同步变化
2 回复
