chuyển chỉ dành cho các biên giới trên di chuột, nhưng không phải cho nền

Question

Ở đây tôi có một số 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; 
    } 

Tuy nhiên điều này không hoạt động. Điều duy nhất xảy ra là màu nền có chuyển đổi trong khi tôi muốn nó chỉ thay đổi khi di chuột, trong khi biên giới tôi muốn chuyển đổi, vì vậy về cơ bản đường viền sẽ biến thành màu trong khi màu nền thay đổi màu ngay lập tức khi di chuột . Đó là những gì tôi muốn hoàn thành, nhưng điều này không hiệu quả. :( Bất kỳ ý tưởng nào cho người dùng?

Answer 1

Những gì bạn cần làm là đặt thuộc tính nào bạn muốn chuyển tải chính xác. Hiện tại bạn có nó là "tất cả" nhưng nó cần phải là "màu nền" hoặc "màu đường viền "trên cơ sở đó bạn muốn được chuyển đổi.

transition: border-color 1s ease; 

http://jsfiddle.net/u3Ahk/

Answer 2

bạn có thể làm ảnh hưởng biên giới trong một rất nhiều cách. áp dụng dưới đây css đến lớp mà bạn sẽ áp dụng hiệu ứng biên giới và thay đổi biên giới trên bất kỳ sự kiện nào xảy ra.

-webkit-transition: border 3s ease; 
-moz-transition: border 3s ease; 
-o-transition: border 3s ease; 
-ms-transition: border 3s ease; 
transition: border 3s ease; 

Cũng tham khảo những liên kết cho các hiệu ứng biên giới trước

https://codepen.io/giana/pen/yYBpVY

http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions