Переход только для границы с зависанием, но не для фона

Здесь у меня есть 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

Что вам нужно сделать, это установить, какое свойство вы хотите правильно перевести. В настоящее время у вас это как "все", но это должен быть либо "фоновый цвет", либо "пограничный цвет", на основе которого вы хотите перейти.

 transition: border-color 1s ease;

http://jsfiddle.net/u3Ahk/

Ответ 2

Вы можете сделать эффект границы во многом. Примените приведенный ниже 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