Question

一个小的CSS过渡效果：

＆＃13;

div#Back a {
    width: 40px;
    height: 20px;
    position: fixed;
    left: 6%;
    color: #cccccc;
    z-index: 2;
    bottom: 5%;
    font-weight: 600;
    font-size: 18px;
    font-variant: inherit;
    border: 1px solid;
    padding: 10px;
    border-radius: 15px;
}

div#Back a:hover {
    border-radius: 0px;
    -moz-border-radius: 0px; 
    
    -webkit-transition: border-radius 2s ease-out;
    -moz-transition: border-radius 2s ease-out;
    -o-transition: border-radius 2s ease-out;
    transition: border-radius 2s ease-out;
    
}

＆＃13;

<div id="Back"><a onclick="goBack();">Back</a></div>

＆＃13;

悬停效果很好，但转换到原始效果不起作用。它直接跳跃。有什么问题？

Answer 1

问题是你只为悬停状态指定了transition - 所以当另一个“方向”的状态发生变化时，从悬停回到正常状态，就没有转换。

为两者指定transition。（由于：hover状态“继承”正常状态的值，因此仅在此处将其指定为正常状态就足够了。）

div#Back a {
    width: 40px;
    height: 20px;
    position: fixed;
    left: 6%;
    color: #cccccc;
    z-index: 2;
    bottom: 5%;
    font-weight: 600;
    font-size: 18px;
    font-variant: inherit;
    border: 1px solid;
    padding: 10px;
    border-radius: 15px;
    -webkit-transition: border-radius 2s ease-out;
    -moz-transition: border-radius 2s ease-out;
    -o-transition: border-radius 2s ease-out;
    transition: border-radius 2s ease-out;
}

div#Back a:hover {
    border-radius: 0px;
    -moz-border-radius: 0px; 
}

<div id="Back"><a onclick="goBack();">Back</a></div>

Answer 2

这是因为CSS的工作原理。你有两个选择器，每个都有自己的规则。

div#Back a {
   // rules 1
}

div#Back a:hover {
   // rules 2
}

如果您将<a>元素悬停，它将执行rules 2集。此设置应用过渡效果，因此您在悬停时会看到移动动画为更圆的按钮。

但是当用鼠标离开<a>元素时，悬停效果不再有效，因此返回到rules 1集。但是，它不包含过渡动画。所以渲染引擎会弹出＃34;规则中描述的风格。如果要将动画设置回原始状态，只需为该选择器定义转换规则，并仅在悬停元素时更改值（用于动画）效果。

＆＃13;

div#Back a {
    width: 40px;
    height: 20px;
    position: fixed;
    left: 6%;
    color: #cccccc;
    z-index: 2;
    bottom: 5%;
    font-weight: 600;
    font-size: 18px;
    font-variant: inherit;
    border: 1px solid;
    padding: 10px;
    border-radius: 15px;
    
    -webkit-transition: border-radius 2s ease-out;
    -moz-transition: border-radius 2s ease-out;
    -o-transition: border-radius 2s ease-out;
    transition: border-radius 2s ease-out;
}

div#Back a:hover {
    border-radius: 0px;
    -moz-border-radius: 0px;
}

＆＃13;

<div id="Back"><a onclick="goBack();">Back</a></div>

＆＃13;

Answer 3

使用div＃Back而不是悬停进行转换。

div#Back a {
  width: 40px;
  height: 20px;
  position: fixed;
  left: 6%;
  color: #cccccc;
  z-index: 2;
  bottom: 5%;
  font-weight: 600;
  font-size: 18px;
  font-variant: inherit;
  border: 1px solid;
  padding: 10px;
  border-radius: 15px;
  -webkit-transition: border-radius 2s ease-out;
  -moz-transition: border-radius 2s ease-out;
  -o-transition: border-radius 2s ease-out;
  transition: border-radius 2s ease-out;
}

div#Back a:hover {
  border-radius: 0px;
  -moz-border-radius: 0px;
}

<div id="Back"><a onclick="goBack();">Back</a></div>

定义CSS过渡效果（开始和结束定位）

3 个答案: