css的选择符只能是从父到子,从上到下的顺序。无法根据子元素的状态来改变祖先元素。
你的这个问题只能是改变:hover元素的下面的某个兄弟元素的高度,把祖先元素的高度撑起来。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
border: 1px solid #999;
width: 250px;
height: auto;
}
#box .content {
height: 150px;
}
#box input:hover~.content {
height: 300px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="test" value="" />
<div class="content">
</div>
</div>
</body>
</html>