Tôi cố gắng tạo hoạt ảnh bằng hoạt ảnh webkit và @ -webkit-keyframe. Tôi có một div hoạt hình với div con bên trong.hoạt ảnh webkit css3 dừng trên div: hover
Và tôi sẽ ngừng hoạt ảnh webkit của cha mẹ khi chuột của tôi trên một đứa trẻ.
Bất kỳ ví dụ nào?
Cảm ơn
Rất tiếc, không có bộ chọn gốc nào trong CSS, see here. Bạn sẽ phải sử dụng một chút javascript để chọn phụ huynh và yêu cầu nó tạm dừng.
Tờ khai tạm dừng trong CSS đi như thế này:
-webkit-animation-play-state: paused | running;
Các javascript (jQuery, trong trường hợp này) sẽ giống như thế này:
$(".child").hover(
function(){
$(this).parent().css("-webkit-animation-play-state", "paused");
},
function(){
$(this).parent().css("-webkit-animation-play-state", "running");
});
Xem trình diễn live ở đây:
Nếu bạn sử dụng nhãn phức tạp hơn bạn c đạt được điều này mà không có Javascript. Tôi đã sử dụng .parent:hover .child { -webkit-animation-play-state: paused; } và nó hoạt động hoàn hảo.
Tôi biết câu hỏi và câu trả lời này hơi cũ, nhưng chỉ trong trường hợp suy nghĩ của tôi là sai: bạn không thể làm được, trong CSS, '.ild: hover {-webkit-animation-play-state: bị tạm dừng; } '? Điều đó có hiệu quả mà không cần phải sử dụng Javascript? –
Không, bởi vì bạn đang yêu cầu đứa trẻ dừng lại, trong khi những gì đang được làm động là cha mẹ. Đứa trẻ trong bản chất thậm chí không "biết" nó đang được hoạt hình. – Duopixel
Bạn biết đấy, tôi hoàn toàn bỏ lỡ cuộc gọi '.parent()' trong hàm di chuột. Có thể một ngày nào đó những người chọn tổ tiên sẽ trở nên có sẵn, nhưng cho đến lúc đó tôi tưởng tượng đây là cách duy nhất. –