18

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

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

4

2 回答 2

52

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

 transition: border-color 1s ease;  

http://jsfiddle.net/u3Ahk/

于 2013-01-18T15:02:24.857 回答
6

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

于 2016-07-17T05:31:21.913 回答