CSS: Ngăn chặn thuộc tính ảnh hưởng đến yếu tố cho đến khi kết thúc quá trình chuyển đổi

Question

Chúng tôi có một số hộp để hiển thị một số dữ liệu khi di chuột. Vì vậy, khi chúng ta di chuyển chuột qua một phần tử, nó sẽ mở rộng, đi trước các phần tử khác và hiển thị dữ liệu ẩn.

tôi đã làm một cái gì đó như thế này:

box:hover { 
    z-index: 50; 
} 

Nhưng có một vấn đề; Khi chúng tôi di chuyển chuột trên một khoảng trắng bên ngoài khác, giá trị z-index quay lại giá trị, giống như các giá trị khác. Vì vậy, nó có thể nhìn thấy rằng yếu tố lơ lửng là ở lớp thấp hơn so với phần tiếp theo.

Làm cách nào để ngăn chặn thuộc tính áp dụng cho đến khi kết thúc quá trình chuyển đổi?

Đây là số jsFiddle của tôi. Cố gắng di chuột qua một phần tử, di chuột ra khỏi phần tử và hình nền của các phần tử khác sẽ ở phía trước phần tử được di chuột của chúng tôi trước khi quá trình chuyển đổi kết thúc.

Cập nhật: đây là ảnh chụp màn hình của sự cố. Đây là khi chúng ta háo hức về yếu tố. background-image của một yếu tố khác xuất hiện trước phần tử được di chuột của chúng tôi.

Answer 1

Thêm một sự chuyển tiếp cũng cho z-index, nhưng chèn một sự chậm trễ chỉ khi .box ở trạng thái bình thường.

Làm như vậy các z-index sẽ thay đổi istantly trên di chuột, trong khi trên hành động ngược lại (“unhover”) các z-index sẽ mất giá trị ban đầu của nó nhưng chỉ sau khi 0.5 giây (thời gian có hiệu lực mở rộng của bạn là 0.4 giây)

.box { 
    ... 
    z-index: 1; 
    -webkit-transition: z-index 0s .5s; 
     -moz-transition: z-index 0s .5s; 
      transition: z-index 0s .5s; 
} 

.box:hover { 
    -webkit-transition: z-index 0s 0s; 
     -moz-transition: z-index 0s 0s; 
      transition: z-index 0s 0s; 
    z-index: 50; 
} 

ví dụ: http://jsfiddle.net/yjg2oach/

Answer 2

Thêm một thuộc tính chuyển đổi sang nhóm .box của bạn.

.box { 
    float: left; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    margin-bottom: 35px; 
     transition: .4s; 
} 

Fixed fiddle