CSS / HTML - 转换不会触发

I have an LI list, with anchor links in, which will get a border around them on hover. I want to use the transition style for whenever the links are hovered, to make the border-color ease in.

我有一个LI列表，其中有锚链接，在悬停时会在它们周围形成边框。我想在链接悬停时使用过渡样式，以使边框颜色更容易。

This is what I am doing:

这就是我在做的事情：

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

}

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

}

Although this doesn't work - when hovering, it just appears instantly.

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

Please see this JSFIDDLE for reference

请参阅此JSFIDDLE以供参考

3 个解决方案

#1

That's because you don't have an initial value to make the "from-to" transition, try this:

那是因为你没有初始值来进行“从 - 到”过渡，试试这个：

.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;
}

<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>

#2

You need to define a transparent border to be able to see the transition, so :

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

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

updated fiddle http://jsfiddle.net/v1zswam8/3/

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

#3

You have to do it this way:

你必须这样做：

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

    }

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

    }

#1