过渡仅适用于悬停的边界，而不是背景(Transition only for the border o

在这里我有一些CSS：

    #image-edges-beneath:hover{
    background-color: blue;
    }

    #image-edges:hover{
      background-color: blue;
    }

    #image-edges-beneat:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

    #image-edges:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

然而，这是行不通的。 其发生的唯一的事情是，背景颜色有变，而我希望它只是改变悬停，而边框我希望有一个过渡，所以基本上边框消失在颜色，而背景颜色在悬停立即改变颜色。 这就是我想要完成的任务，但是这是行不通的。 :(任何想法的用户？

Answer 1:

你需要做的是设置要正确transistion哪个属性是什么。 目前，你有它为“所有”，但它需要或者是“背景颜色”或在此基础上要进行转换“边框颜色”。

 transition: border-color 1s ease;  

http://jsfiddle.net/u3Ahk/

Answer 2:

你可以在很多的方式边界效应。 应用下面的CSS到你要申请的边界效应和任何事件发生时，改变边框样式的类。

 -webkit-transition:  border 3s ease;
 -moz-transition:  border 3s ease;
 -o-transition:  border 3s ease;
 -ms-transition: border 3s ease;
 transition: border 3s ease; 

也可参考这些链接，提前边框效果

https://codepen.io/giana/pen/yYBpVY

http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions

文章来源: Transition only for the border on hover, but not for background