CSS 仅在悬停时为边框过渡，而不为背景过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14401454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transition only for the border on hover, but not for background
提问by MFCS
Here I have some CSS:
这里我有一些 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;
}
However this does not work. The only thing which happens is that the background color has a transition while I want it to only change on hover, while the border I want to have a transition, so basically the border fades into the color while the background color changes color immediately upon hover. That's what I want to accomplish, but this doesn't work. :( Any ideas users?
但是，这不起作用。唯一发生的事情是背景颜色有一个过渡，而我希望它只在悬停时改变，而边框我想有一个过渡，所以基本上边框淡入颜色而背景颜色在悬停时立即改变颜色. 这就是我想要完成的，但这行不通。:(任何想法用户？
回答by Kyle
What you need to do is set which property you want to transistion properly. Currently you have it as "all" but it needs to be either "background-color" or "border-color" based on which you want to be transitioned.
您需要做的是设置要正确转换的属性。目前，您将其设为“全部”，但需要根据您要转换的内容为“背景颜色”或“边框颜色”。
transition: border-color 1s ease;
回答by loyola
You can do border effect in a lots of way. Apply the below css to the class which you gonna apply border effect and change the border style on any event occurs.
您可以通过多种方式实现边框效果。将以下 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;
Also refer these links for advance border effects
另请参阅这些链接以了解高级边框效果
https://codepen.io/giana/pen/yYBpVY
https://codepen.io/giana/pen/yYBpVY
http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions
http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions
