Question

我在导航栏上使用CSS过渡轻松进行鼠标悬停。但是，只有当鼠标光标悬停时，转换才会缓和，并且在光标离开超链接区域后立即快速恢复，它不会顺利缓和。

这是我使用的CSS：

nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: #036;    
}

nav ul {
    list-style: none;
    margin-top: 15px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px 0;
}

.nav-logo {
    margin-left: 20px;
    background-color: #cacaca;
}

.nav-logo:hover {
    transform: scale(1.1);
    transition: all 1s ease-in-out;
}

nav ul li a:hover {
    background-color: gold;
    color: black;
    border-radius: 10px;
    transform: scale(1.1);
    transition: .3s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

Answer 1

您需要采用过渡样式：

transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);

将其从nav ul li a:hover中删除，然后将其添加到实际元素nav ul li a

虽然它们仍悬停在悬停状态，但实质上是在没有悬停时移除转换，因此在您离开悬停状态后转换不适用。

Answer 2

您需要在根元素上添加转换，而不是在悬停状态。

nav {
  background-color: yellow;
  position: relative;
  overflow: auto;
  transition: background-color .3s ease-in-out;
}
nav:hover {
  background-color: pink;
}

http://codepen.io/mrshannonyoung/pen/BLzpNz

CSS缓入转换无法正常工作

2 个答案: