沉浸在代码无法自拔 2018-10-23 13:48 采纳率: 100%
浏览 4024
已采纳

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

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

高级搜索

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

  • 写回答

1条回答

  • 天际的海浪 2018-10-23 15:28
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥30 python代码，帮调试，帮帮忙吧
  • ¥15 #MATLAB仿真#车辆换道路径规划