仅适用于悬停时的边框，但不适用于背景

Posted 2023-03-06

【中文标题】仅适用于悬停时的边框，但不适用于背景

【英文标题】：Transition only for the border on hover, but not for background

【发布时间】：2013-01-02 07:30:23

【问题描述】：

这里有一些 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;
    

但是这不起作用。唯一发生的是背景颜色有一个过渡，而我希望它只在悬停时改变，而边框我想有一个过渡，所以基本上边框淡入颜色，而背景颜色在悬停时立即改变颜色.这就是我想要完成的，但这不起作用。 :( 用户有什么想法吗？

【参考方案1】：

您可以通过多种方式制作边框效果。将下面的 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

【参考方案2】：

您需要做的是设置要正确转换的属性。目前您将其设置为“全部”，但它需要是“背景颜色”或“边框颜色”，基于您要进行转换。

 transition: border-color 1s ease;  

http://jsfiddle.net/u3Ahk/

【讨论】：

不要忘记跨浏览器支持的前缀！ -webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;