CSS Hover & onmouseover/out gây ra việc sử dụng CPU 15-20% trong Internet Explorer

Question

là có lý do tại sao Internet Explorer (IE7 trong trường hợp của tôi) bị chậm chạp và ăn nhiều thời gian CPU khi sử dụng lệnh CSS: hover hoặc sử dụng onmouseover/onmouseout?

Tôi thực sự không làm gì phức tạp, cũng không phải trang của tôi đặc biệt lớn.

Khi tôi di chuyển chuột ở bất kỳ nơi nào khác trên trang (nơi không có gì thay đổi) iexplore.exe ở mức 0%, nhưng một khi tôi bắt đầu di chuyển trên bất kỳ phần tử nào có onmouseover/onmouseout hoặc lớp di chuột CSS đính kèm, mọi thứ trở nên chậm chạp và chậm chạp và mức sử dụng CPU cao.

Trang hoạt động hoàn toàn tốt trong Firefox, Chrome và Safari không có vấn đề về tốc độ/chậm chạp.

Gợi ý/Ý tưởng?

Edit: Các onmouseover/onmouseout là trên < tr> thẻ (làm nổi bật một hàng trong một mạng lưới); CSS: hover được sử dụng trên các thẻ < a> trao đổi url hình nền.

Answer 1

Bạn cần không nhấp nháy Rollover CSS (không kích hoạt tín hiệu 'di chuột' liên tục với mọi chuyển động nhỏ của chuột). Trao đổi hình ảnh trên di chuột thường không hoạt động tốt, đặc biệt là trong IE.

Cách tốt nhất để làm điều này mà không có một thư viện Javascript là phải có mong muốn 'hover' hình ảnh như một nền tới phần tử dưới một trong những bạn đang lơ lửng trên, và phi di chuột ảnh làm nền cho phần tử ở phía trước.

Sau đó, đối với trạng thái CSS :hover của phần tử ở mặt trước, đặt background-image: none; background-color: transparent; sao cho hình ảnh 'di chuột' mong muốn trong phần tử cơ bản được tiết lộ.

Kiểm tra mã nguồn cho example non-flicker CSS rollover này.

Tùy thuộc vào đánh dấu của bạn, bạn có thể cần điều chỉnh giá trị z-index để lấy phần tử trên cùng 'phía trước' của phần tử cơ bản.

Answer 2

không làm bất cứ điều gì phức tạp

Vâng, những gì là làm gì vậy? Tôi đã nhìn thấy điều này chỉ từ việc thay đổi màu nền tr. IE dường như không tốt ở đây.