Übergang nur für die Grenze beim Schweben, nicht für den Hintergrund

Hier habe ich einige 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;
    }

Dies funktioniert jedoch nicht. Das einzige, was passiert, ist, dass die Hintergrundfarbe einen Übergang hat, während ich möchte, dass sie sich nur beim Schweben ändert, während der Rand, den ich möchte, einen Übergang hat, so dass im Grunde der Rand in die Farbe übergeht, während die Hintergrundfarbe sich sofort beim Schweben ändert . Das möchte ich erreichen, aber das funktioniert nicht. :( Irgendwelche Ideen Benutzer?

Antworten auf die Frage(2)

Ihre Antwort auf die Frage