Chuyển đổi CSS3 Dễ dàng vào và ra Hộp bóng

Question

Tôi đang cố gắng để có được id div để dễ dàng vào và ra khỏi một bóng hộp bằng cách sử dụng CSS3.

CSS hiện tại tôi có là:

#how-to-content-wrap-first:hover { 
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-transition: box-shadow 0.3s ease-in-out 0s; 
-moz-transition: box-shadow 0.3s ease-in-out 0s; 
-o-transition: box-shadow 0.3s ease-in-out 0s; 
-ms-transition: box-shadow 0.3s ease-in-out 0s; 
transition: box-shadow 0.3s ease-in-out 0s; 

Vấn đề tôi đang gặp là trên di chuột đầu tiên của nguyên tố này không có nới lỏng trong hoặc ra ngoài và sau đó bất kỳ dềnh tiếp theo dễ dàng trong nhưng không dễ dàng ngoài.

Bất kỳ lời khuyên nào mọi người sẽ được đánh giá cao?

Answer 1

Bạn cần phải sử dụng hiệu ứng chuyển tiếp trên .class và không .class:hover

Demo

div { 
    height: 200px; 
    width: 200px; 
    box-shadow: none; 
    transition: box-shadow 1s; 
    border: 1px solid #eee; 
} 

div:hover { 
    box-shadow: 0 0 3px #515151; 
}