仅在悬停时转换边界,但不转换为背景 [英] Transition only for the border on hover, but not for background
问题描述
这里有一些CSS:
Here I have some 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?
推荐答案
你需要做的是设置你想要正确转换的属性。目前,您将其设置为全部,但它需要基于您想要转换的背景颜色或边框颜色。
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;
这篇关于仅在悬停时转换边界,但不转换为背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!