Fatal编程技术网
  • html/
  • Html 当父元素悬停时，如何将CSS3转换添加到子元素 CSS转换 .child{显示：无；} .parent:hover>.child{display:block；} 内容

Html 当父元素悬停时，如何将CSS3转换添加到子元素 CSS转换 .child{显示：无；} .parent:hover>.child{display:block；} 内容

html css

Html 当父元素悬停时，如何将CSS3转换添加到子元素 CSS转换 .child{显示：无；} .parent:hover>.child{display:block；} 内容,html,css,transitions,Html,Css,Transitions,我在上面创建了一个简单的布局，展示了我试图实现的概念。我现在想做的是做一个CSS3转换，当父对象悬停时，允许子对象轻松进入。但是，我不知道在哪里放置转换代码，这样它就可以工作了 对于隐藏的子div，使用height:0和溢出：隐藏而不是显示：无，然后在悬停时显示的子对象上添加指定高度。这将允许进行过渡 我会这样做： 例如，添加了颜色 <!doctype html> <html> <head> <meta charset="utf-8">

我在上面创建了一个简单的布局，展示了我试图实现的概念。我现在想做的是做一个CSS3转换，当父对象悬停时，允许子对象轻松进入。但是，我不知道在哪里放置转换代码，这样它就可以工作了

对于隐藏的子div，使用
height:0和
溢出：隐藏而不是
显示：无，然后在悬停时显示的子对象上添加指定高度。这将允许进行过渡

我会这样做：

例如，添加了颜色


<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>CSS Transition</title>
   <style>
     .child{ display: none; }
     .parent:hover > .child{ display: block; }
   </style>
 </head>
 <body>
  <div class="parent">
   <div class="child">Content</div>
  </div>
 </body>
</html>



.parent {
    background: red;
}
.child {
    overflow: hidden;
    height: 0;
    background: blue;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    color: white;
}
.parent:hover > .child {
    height: 30px;
    display: block;
}