CSS: sau khi di chuột chuyển

Question

Cấu trúc HTML

<div id="small_gal"> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
</div> 

Những hình ảnh đang có dropshadows nên border không phải là một giải pháp, vì nó sẽ là bên ngoài hình ảnh

Biên giới là có quá trình chuyển đổi và hoạt động trơn tru trên FF nhưng không hoạt động trong chrome hoặc các trình duyệt khác

Đây là mã mà tôi đã sử dụng

#small_gal div:hover{cursor: pointer;} 
#small_gal div:after { 
    content: ''; 
    position: absolute; 
    width: 112px; 
    height: 81px; 
    border: 3px solid #e27501; 
    left: 9px; top: 9px; 
    z-index: 9; 

    opacity: 0; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 
#small_gal div:hover:after { 
    opacity: 1; 
} 

Lưu ý:

#small_gal 

chỉ container mỗi hình ảnh được bọc trong một div vì vậy chúng tôi có thể thực hiện: sau khi

Answer 1

Firefox 4+ là trình duyệt duy nhất hỗ trợ việc chuyển đổi các phần tử giả như :before và :after.

Nguồn: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Answer 2

chuyển CSS vẫn thực nghiệm trong WebKit do đó, nó có khả năng bạn đã nhấn một số lỗi cạnh hợp cụ thể liên quan đến việc :: sau pseudo-selector. Tôi khuyên bạn nên tránh hoàn toàn và chỉ cần chuyển đổi border-color. Điều này làm việc tốt trong Chrome và Safari:

#small_gal div.p { 
    border: 2px solid transparent; 
    -webkit-transition: border-color 1s ease-in; 
} 

#small_gal div.p:hover { 
    border-color: orange; 
} 

Answer 3

Bạn có thể sử dụng hiệu ứng chuyển tiếp CSS trên các yếu tố giả như: trước và: after nếu bạn có thể xác định tài sản trên các yếu tố chính nó và sử dụng inherit trong các yếu tố giả. Vì vậy, trong trường hợp của bạn thay vì đặt một quá trình chuyển đổi trên opacity, bạn có thể đặt một chuyển đổi trên border-color.

*, *:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#small_gal div { 
 
    border-color: transparent; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: border-color 0.5s ease-in-out; 
 
    -moz-transition: border-color 0.5s ease-in-out; 
 
    -o-transition: border-color 0.5s ease-in-out; 
 
    -ms-transition: border-color 0.5s ease-in-out; 
 
    transition: border-color 0.5s ease-in-out; 
 
} 
 
#small_gal div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-color: inherit; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#small_gal div:hover { 
 
    border-color: #e27501; 
 
} 
 
#small_gal div img { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 150px; 
 
    width: auto; 
 
}

<div id="small_gal"> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
</div>