Question

我有一个LI列表，其中包含锚链接，在悬停时会有一个边框。我想在链接悬停时使用过渡样式，以使边框颜色变得容易。

这就是我在做的事情：

    .sidemenu li a {
    transition: border-color 2s ease;
    -webkit-transition: border-color 2s ease;  

}

.sidemenu li a:hover {
    border:1px solid #27AE60;

}

虽然这不起作用 - 当悬停时，它会立即出现。

请参阅 this JSFIDDLE for reference

Answer 1

您需要定义透明边框才能看到过渡，所以：

.sidemenu li a {
    /* add this line */
    border:1px solid transparent;
    transition: border-color 2s ease;
    -webkit-transition: border-color 2s ease;  
}

更新了小提琴http://jsfiddle.net/v1zswam8/3/

Answer 2

那是因为你没有初始值来进行"from-to"过渡，试试这个：

＆＃13;

.sidemenu li a {
  transition: border-color 2s ease;
  -webkit-transition: border-color 2s ease;
  border:1px solid transparent;
}
.sidemenu li a:hover {
  border: 1px solid #27AE60;
}

＆＃13;

<div class="sidemenu-container">
  <ul class="sidemenu">
    <li class="head">Account Overview</li>
    <li>
      <a href="#"><i class="ic ic-pulse"></i> My Account</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 3

你必须这样做：

   .sidemenu li a {
        border: solid 1px #fff;
        -webkit-transition: border 2s;

    }

    .sidemenu li a:hover {
        -webkit-transition: border 2s;
        border:1px solid #27AE60;

    }

CSS / HTML - 转换不会触发

3 个答案: