CSS3过渡不适用于显示属性

  • Z时代
  • 2024-01-10
  • 分类：问答

每当我将其悬停在其父元素上时，我一直试图使用css来显示Hidden Div淡入。

到目前为止，我所能做的就是让隐藏的div显示出来，但是到目前为止，还没有轻松的过渡。

这是我的代码：

HTML：

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS：

#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
    opacity:0;
    clear: both;
    display: none;
    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

关于我在做什么错的任何线索吗？当我将鼠标悬停在按钮上时，只是试图为隐藏的内容提供平滑的效果。提前致谢！

回答：

display:none;从页面中删除一个块，就好像它从来没有出现过一样。块不能部分显示；它在那儿或不在那里。同样是正确的visibility;您不能指望一个块是hidden定义的一半visible！幸运的是，您可以改用opacity淡入淡出效果。 - 参考作为alternatiiveCSS的解决方案，你可以玩opacity，height而且padding性能达到理想的效果：

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}
#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

（由于简洁，省略了供应商前缀。）

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}
#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>

以上是 CSS3过渡不适用于显示属性 的全部内容， 来源链接： utcz.com/qa/401925.html

回到顶部