仅适用于悬停时的边框，但不适用于背景 [英] Transition only for the border on hover, but not for background

问题描述

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

http://jsfiddle.net/u3Ahk/

这篇关于仅适用于悬停时的边框，但不适用于背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！