动态变化高度的元素的子元素的height:inherit 不起作用
发布于 7 个月前 作者 yakczh 968 次浏览 来自 问答
<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 回复

题主是想在正常状态下隐藏文字,然后在hover状态下显示文字吧? 其实inherit之后高度已经继承了(一个在正常状态一个在hover状态) image.png 但文字会溢出,可以通过给父级元素设置overflow:hidden来隐藏

回到顶部