CSS / HTML - 转换不会触发答案

【问题标题】：CSS / HTML - Transition doesn't triggerCSS / HTML - 转换不会触发
【发布时间】：2015-02-11 00:17:36
【问题描述】：

我有一个 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

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

我已经复制了您的确切代码 - 仍然无法正常工作。虽然它在您发布的代码 sn-p 中有效。
@oliverbj on fiddle 也可以工作jsfiddle.net/v1zswam8/1 ...我只是为border 属性添加初始状态。

【解决方案3】：

你必须这样做：

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

    }

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

    }

【讨论】：