怎么用css中的hover实现鼠标悬停子元素让祖先元素高度改变?

如题所述,就是我鼠标悬停搜索框之后下面的列表会从透明度0到1的转变,然后外面的边框高度变得足以容纳这个显示的列表!,我写了半天了 就是写不出来 图片说明图片说明以下是我的代码

高级搜索

  • 场合
  • 性别男女
  • 风格中国欧美
  • 色系暖冷
  • 价格1011
  • 年龄20+18-
  • 季节春夏秋冬

css

1个回答

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> 
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
子元素相对祖先元素居中显示
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 &lt;div class="A"&gt; &lt;div class="B"&gt;&lt;/div&gt; &lt;/div&gt; ...
css之hover改变另外一个元素的状态
以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了, 例如 classA:hover classB{ display:none; } 但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元...
css :hover伪类改变其他元素样式
html部分: &amp;lt;div&amp;gt;我喜欢&amp;lt;/div&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;shiziwang&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;saonan&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;xinba&amp;lt;/li&amp;gt; &amp;lt;/ul&amp;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” 元素的后代元素中的所有&amp;lt;span&amp;gt;元素         #log &amp;gt; span   // id =“log” 元素的子元素中的所有&amp;lt;span&amp;gt;元素   后代元素包括了 子元素 、 孙子元素 、重孙子元素 等等 范围更大 加了 &amp;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结构:         &amp;lt;div id=&quot;mapDiv&quot; class=&quot;hescgis_map&quot;&amp;gt;             &amp;lt;div id=buttonDiv&amp;gt;&amp;lt;span id=&quot;buttonFlag&quot; &amp;gt;&amp;lt;/span&amp;gt;             &amp;lt;button id=&quot;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;amp;lt;ion-card class=&amp;amp;quot;me-card-tel&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;span class=&amp;amp;quot;phone&amp;amp;quot;&amp;amp;amp;gt
作业19-改变元素高度
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;改变元素高度&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot; &amp;gt; body{ margin:
table去除鼠标悬停hover效果
网上有很多“table如何增加鼠标悬停效果”的这种帖子,无非就是加hover。但是我现在遇到了一个问题,我在项目中创建了干干净净的一个table,发现它居然是有鼠标悬停效果的,我猜估计是有一个全局的table样式起作用了,因为我当前的页面是通过seajs加上header,footer和左边的nav菜单构建起来的,可能会有一个我看不到的common.css。
css中如何固定元素的宽度和高度
直接开门见山啦,请看下面代码与效果: &amp;lt;style&amp;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: &amp;lt;div class=&quot;box shadow&quot;&amp;gt; 这是是pic-1 &amp;lt;div class=&quot;circle&quot;&amp;gt;&amp;lt;/div&amp;gt; ...
让div父元素的高度随子元素高度的变化而变化
让div父元素的高度随子元素高度的变化而变化
CSS实现简单Hover动画
CSS实现简单Hover动画 这是第二次制作网页相关的东西,是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果: 代码部分,css样式我就放在了html文件里面了: &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt; CSS效果&amp;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让元素垂直居中
问题: 布局如下 &lt;div class="head" style="background-color: chartreuse"&gt; //大的div &lt;div class="logo" style="background-color: darkblue"&gt; //小的div &lt;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
  &amp;lt;!--[if IE]&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; .live_tree {padding: 1px !important;} table(ID或是html tag_name) {behavior: url(&amp;lt;%= stylesheet_path &quot;csshover.htc&quot; %&amp;gt;);} &amp;lt;/sty...
父元素自适应子元素的高度
在设计中宽度我们通常可以进行控制,但高度却没有明确的控制,一般元素的高度都是由子元素来控制的。即子元素的高度和决定了父元素的高度。当然手动设置父元素的指定高度也是可以的。 问题:百分比控制的父元素有时不能够被撑开,子元素都几百px了,但父元素高度仍然为0。 原因:浮动造成了容器不能正常计算元素高度。 解决方案:     方案一:为父元素添加样式:overflow:hidden;该样式相当于
swiper高度自适应子元素的高度
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 示例图:上面的三个tab是swiper,然后红框内的高度不固定的情况下,让swiper高度自适应循环渲染出来的高度加上面的高度。 解决代码: xwml &lt;swiper current="{{current}}" bindchange="change" duration="300" ...
Flex 子元素高度塌陷
先看看页面整体布局: · wrap 弹性布局,分 head、main; · head 弹性布局,分 h2、i ; 问题:head 高度塌陷。 高 32px,变成:24.03px(PS里:chrome是23px,IE是24px)。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;...
怎么改变的显示高度?!
如下:rn rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1 rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn 1rn rn点击标签,默认弹出列表的高度为10,怎么改变这个显示高度!!!!!!!rn
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制