代码之家 › 专栏 › 技术社区 › cdub

仅使用css减缓悬停

css3 css

cdub · 技术社区 · 6 年前

我有下面的css,希望在displaylnone属性关闭hover时减慢它的速度,但是转换似乎不起作用。

CSS:

.dropdown .dropdown-menu
{
    position: absolute;
    top: 38px;
    left: -15px;
    display: none;
    margin: 0;

    list-style: none; 
    width:200px;
    border:1px solid #759931;
    padding: 0;
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index:10000;
    -webkit-transition: all 5000ms ease;
    -moz-transition: all 5000ms ease;
    -ms-transition: all 5000ms ease;
    -o-transition: all 5000ms ease;
    transition: all 5000ms ease;
}

.dropdown:hover .dropdown-menu
{
    display: block;
}

jsfiddle会有帮助。

4 回复 | 直到 6 年前

connexo 6 年前

display 无法转换或设置动画。使用 opacity 或 transform: scale() 根据你的喜好。下面是一个使用 不透明度 以下内容:

.dropdown .dropdown-menu {
  position: absolute;
  top: 38px;
  left: -15px;
  opacity: 0;
  margin: 0;
  list-style: none;
  width: 200px;
  border: 1px solid #759931;
  padding: 0;
  background: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  z-index: 10000;
  -webkit-transition: all 5000ms ease;
  -moz-transition: all 5000ms ease;
  -ms-transition: all 5000ms ease;
  -o-transition: all 5000ms ease;
  transition: all 5000ms ease;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
}

/* demo styles */
.dropdown {
  background-color: #f0f0f0;
  position: relative;
  height: 30px;
  width: 200px;
}

<div class="dropdown">Hover me
  <div class="dropdown-menu">My beautiful menu</div>
</div>

Caroline 6 年前

.dropdown {
  padding: 5px;
  background: tomato;
  position: relative;
}
.dropdown .dropdown-menu {
  position: absolute;
  transition: all 500ms ease-in-out;
  opacity: 0;
  visibility: hidden;
  
  background: white;
  border: 1px solid peru;
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

<div class="dropdown">
  Hover
  <div class="dropdown-menu">Menu</div>
</div>

关键位是 opacity: 0 和 visibility: hidden 然后 opacity: 1 和 visibility: visible 悬停。这将创造你想要的过渡/淡入的外观。

Matthew Moore 6 年前

transition 和 animate 仅处理某些属性(请参见: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties )中。必须使用高度/宽度、不透明度等。

如果使用 height 或 width ,关键字 auto 无法转换到或从。

编辑:

li>ul.height {
  max-height: 0;
  overflow: hidden;
}

li:hover>ul.height {
  max-height: 200px;
}

li>ul.opacity {
  opacity: 0;
}

li:hover>ul.opacity {
  opacity: 1;
}


/* Basic Stuff */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

div>ul>li {
  display: inline-block;
  position: relative;
  padding: .5em;
}

li>ul {
  position: absolute;
  left: 0;
  transition: all ease 2s;
}

a {
  display: block;
  padding: .5em;
}

<div>
  <ul>
    <li>Sublist Height
      <ul class="height">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
      </ul>
    </li>
    <li>Sublist Opacity
      <ul class="opacity">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
      </ul>
    </li>
  </ul>
</div>

enbermudas 6 年前

这个 display 属性不可设置动画。您可以在此处读取可设置动画的属性列表(转换为:可使用转换/动画的属性): CSS Animatable