图片说明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>
- 其他相关推荐
- 子元素相对祖先元素居中显示
- var isScroll = 1,rate; //判断页面是否有滚动条 //底图自适应 function selfadaptionFn(){ var wndWidth = $(window).width() + isScroll*16, wndHeight = $(window).height() + isScroll*16,
- CSS笔记 :hover改变另一个元素样式
- 写在前面 近日，在做项目的时候遇到一个需求： 鼠标悬停在A元素时，改变B元素样式 显然，是要用到:hover来写，但应用的场景有点小讲究，分为两种情形。 情景1：A元素是B元素的父级 //情景1 <div class="A"> <div class="B"></div> </div> ...
- css之hover改变另外一个元素的状态
- 以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了, 例如 classA:hover classB{ display:none; } 但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元...
- css :hover伪类改变其他元素样式
- html部分： &lt;div&gt;我喜欢&lt;/div&gt; &lt;ul&gt; &lt;li&gt;shiziwang&lt;/li&gt; &lt;li&gt;saonan&lt;/li&gt; &lt;li&gt;xinba&lt;/li&gt; &lt;/ul&gt; css部分： *{ list-style: n
- CSS hover 同级元素
- .child_head ul .senav:hover +.edit span{ border-left: 1px solid transparent; } 默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，如果是兄弟关系，那么你必须要这样设置了。
- 用css实现的鼠标悬停效果
- <html> <head> <meta charset="utf-8"> <title></title> <base target="_blank" /> <style> a{ color: black; text-decoration: none; /*border:solid 1
- 父元素随着子元素高度改变而改变
- 转载自https://blog.csdn.net/friendan/article/details/51043760
- hover改变另外一个元素
- 背景 鼠标移到A，使B、C、D出现动画，纯用css。 此时此刻，需要使用hover hover的一般用法 hover的最原始用法是： a:hover { background-color:yellow; } 鼠标移动到 a标签上，改变a的背景颜色。 初学的时候都是这么学习的，导致很多人以为只有a标签才有hover。错了，hover是针对所有元素的。 hover的进阶用法 鼠标指在A元素上，使A...
- hover改变其他元素样式
- 代码<!doctype html> <html> <head> <style> .fir:hover .sec{display: none;} </style> </head> <body> <div style="border: 1px solid red ;height: 100px;width: 100px;" class="fir"> <div><di
- css中 后代元素 和 子元素的表示方法
- 在css中的表示 #log span // id =“log” 元素的后代元素中的所有&lt;span&gt;元素 #log &gt; span // id =“log” 元素的子元素中的所有&lt;span&gt;元素 后代元素包括了 子元素 、 孙子元素 、重孙子元素 等等 范围更大 加了 &gt; 符号，说明只是子元素 ，范围小一...
- QPushButton的hover鼠标悬停效果
- QPushButton#AddShopInfoBtn { background-image: url(:/images/add_shop_data_normal.png); border: none; background-repeat: no-repeat; min-height: 28px; min-width: 100px; ma
- css:hover状态改变另一个元素样式的使用
- 例如有如下dom结构： &lt;div id="mapDiv" class="hescgis_map"&gt; &lt;div id=buttonDiv&gt;&lt;span id="buttonFlag" &gt;&lt;/span&gt; &lt;button id="buttonOnMap&qu
- CSS外级hover改变內级元素的display应用
- 太棒棒了。。不用写js。。。
- 鼠标悬停改变滚动条样式（高度、宽度、颜色）
- 接到UE需求，需要对界面滚动条进行修改，主要是鼠标悬停改变颜色和大小，心里想着是比较简单的（万恶的IE肯定不在考虑范围内），谁知道愣是搞了半天才完成ORZ，直接上源码和实现图吧。 css代码 ::-webkit-scrollbar{ height: 9px !important; width: 9px !important; ...
- CSS中HOVER的使用
- 请教各位：鼠标移动到DIV1上时，如何使DIV2的背景图片改变？DIV1与DIV2相互独立，最好能有一段代码示例，先行拜谢！
- css中让元素居中
- 做ionic项目，遇到个问题。如下，要让span在ion-card中垂直居中。 核心：子元素设置 line-height等于父元素的height。 效果图： &amp;amp;lt;ion-card class=&amp;quot;me-card-tel&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&amp;quot;phone&amp;quot;&amp;amp;gt
- 作业19-改变元素高度
- &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;改变元素高度&lt;/title&gt; &lt;style type="text/css" &gt; body{ margin:
- table去除鼠标悬停hover效果
- 网上有很多“table如何增加鼠标悬停效果”的这种帖子，无非就是加hover。但是我现在遇到了一个问题，我在项目中创建了干干净净的一个table，发现它居然是有鼠标悬停效果的，我猜估计是有一个全局的table样式起作用了，因为我当前的页面是通过seajs加上header,footer和左边的nav菜单构建起来的，可能会有一个我看不到的common.css。
- css中如何固定元素的宽度和高度
- 直接开门见山啦，请看下面代码与效果： &lt;style&gt; .one{ height:100px; width:100px; box-sizing:border-box;//设置了该属性 padding:5px; margin:5px; border:5px solid green; background: red; } .two...
- css的 HOVER
- css的 HOVER
- CSS定义元素宽度和高度
- 本课程主要目标是教给大家：rn1）HTML和CSS能干什么？rn2）HTML和CSS是什么？rn3）HTML和CSS怎么用，这里会讲解常用到的HTML和CSS的使用规则rn4）一步一步开发一个响应式的页面rnQQ交流群：659123270
- jquery 获取this元素子元素的子元素
- jquery 获取this元素子元素的子元素
- CSS hover控制其他元素求助！
- 现在的代码是[code=html] [/code]rn[code=css].wrapp .aaaa:hover .nb rnmargin-left: 0px;rntop: 350px;rnposition: fixed;rn[/code]rn可是在aaaa上hover之后nb的属性没变啊[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/16.gif][/img]rnhttp://miao.link求帮助....
- CSS实现子元素垂直居中对齐
- 子元素垂直居中对齐
- CSS鼠标悬停
- 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享： 先看效果 HTML部分 html： &lt;div class="box shadow"&gt; 这是是pic-1 &lt;div class="circle"&gt;&lt;/div&gt; ...
- 让div父元素的高度随子元素高度的变化而变化
- 让div父元素的高度随子元素高度的变化而变化
- CSS实现简单Hover动画
- CSS实现简单Hover动画 这是第二次制作网页相关的东西，是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果： 代码部分，css样式我就放在了html文件里面了： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; CSS效果&lt;/t..
- css中用hover实现二级菜单
- css中用hover实现二级菜单 在我们日常生活中，通常会看到下拉菜单会有一些二级菜单，下面就为大家讲解一下如何生成二级菜单。 第一步首先进行一个页面的主要布局，我这里主要用的是ul+li进行嵌套布局，内容如下： 第二部就要给它进行一个格式的编写，让它实现效果： 以上就是一个简单的二级菜单的制作方法，如果大家在做样式的时候感觉选择器用的比较多麻烦，可以起个class类名。下面在附上一张效果图...
- 改变父元素的透明度，不影响子元素的透明度—css
- 1、如果我们给父元素添加opacity:0.4后，子元素的red颜色也变成了0.4的透明度， 例子如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{
- CSS实现点击改变元素背景色
- https://www.cnblogs.com/skura23/p/6505352.html
- CSS让元素垂直居中
- 问题： 布局如下 <div class="head" style="background-color: chartreuse"> //大的div <div class="logo" style="background-color: darkblue"> //小的div <a href="http://www.baidu...
- css 实现鼠标悬停放大图片
- html css 实现鼠标悬停放大图片
- css实现鼠标悬停图片放大显示
- * { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; width: 300px; margin: 0 auto; overflow: hidden; } .avatar img { display: blo
- 获取祖先元素和后代元素
- 一、获取祖先元素 1、获取直接父级 语法： $(selector).parent();//获取元素的直接父级元素 2、获取元素的所有祖先元素 语法： $(selector).parents([selector]);//后面加上选择器可以过滤祖先元素 3、获取某个元素到某个元素间的所有父级元素 语法：
- 怎么获取元素高度？
- 现在我要点击 配置 就能获取当前 行 的高度？ 请问jquery 怎么写？ 适用IE浏览器 rnrn rn rn 用户名rn 密码rn 配置rn rn rn 张三rn zhangsanrn 配置rn rn rn 李四rn lisirn 配置rn rn rn 王五rn wangwurn 配置rn rn
- 让IE6的所有元素也能hover
- &lt;!--[if IE]&gt; &lt;style type="text/css"&gt; .live_tree {padding: 1px !important;} table（ID或是html tag_name） {behavior: url(&lt;%= stylesheet_path "csshover.htc" %&gt;);} &lt;/sty...
- 父元素自适应子元素的高度
- 在设计中宽度我们通常可以进行控制，但高度却没有明确的控制，一般元素的高度都是由子元素来控制的。即子元素的高度和决定了父元素的高度。当然手动设置父元素的指定高度也是可以的。 问题：百分比控制的父元素有时不能够被撑开，子元素都几百px了，但父元素高度仍然为0。 原因：浮动造成了容器不能正常计算元素高度。 解决方案： 方案一：为父元素添加样式：overflow：hidden；该样式相当于
- swiper高度自适应子元素的高度
- 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 示例图：上面的三个tab是swiper,然后红框内的高度不固定的情况下，让swiper高度自适应循环渲染出来的高度加上面的高度。 解决代码： xwml <swiper current="{{current}}" bindchange="change" duration="300" ...
- Flex 子元素高度塌陷
- 先看看页面整体布局： · wrap 弹性布局，分 head、main； · head 弹性布局，分 h2、i ； 问题：head 高度塌陷。 高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"...
- 怎么改变的显示高度?!
- 如下:rn rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1 rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn rn点击标签,默认弹出列表的高度为10,怎么改变这个显示高度!!!!!!!rn