Di chuột qua CSS so với di chuột qua JavaScript [đã đóng]

Đôi khi tôi phải lựa chọn giữa việc sử dụng một phần tử CSS: di chuột hoặc JavaScript onmouseover để kiểm soát sự xuất hiện của các phần tử html trên một trang. Hãy xem xét tình huống sau đây khi một div bao bọc một đầu vào

<div>
<input id="input">
</div>

Tôi muốn đầu vào thay đổi màu nền khi con trỏ chuột di chuột qua div. Cách tiếp cận CSS là

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

Cách tiếp cận JavaScript là

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

Ưu điểm và nhược điểm của từng cách tiếp cận là gì? Phương pháp CSS có hoạt động tốt với hầu hết các trình duyệt web không? JavaScript có chậm hơn css không?

Vấn đề với: hover là IE6 chỉ hỗ trợ nó trên các liên kết. Tôi sử dụng jQuery cho loại thứ này những ngày này:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

Làm cho mọi thứ dễ dàng hơn rất nhiều. Điều đó sẽ hoạt động trong IE6, FF, Chrome và Safari.

CSS dễ bảo trì và dễ đọc hơn nhiều.

Tại sao không phải cả hai? Sử dụng jQuery cho các hiệu ứng động và CSS làm dự phòng. Điều này mang lại cho bạn những lợi ích của jQuery với sự suy thoái duyên dáng .

CSS:

a {color: blue;}
a:hover {color: red;}

jQuery (sử dụng jQueryUI để tạo hoạt ảnh màu):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

bản giới thiệu

Một lợi ích bổ sung khi làm điều đó trong javascript là bạn có thể thêm / xóa hiệu ứng di chuột tại các thời điểm khác nhau - ví dụ: di chuột qua các hàng trong bảng thay đổi màu sắc, nhấp vào tắt hiệu ứng di chuột và bắt đầu chỉnh sửa ở chế độ tại chỗ.

Một sự khác biệt rất lớn là trạng thái ": hover" sẽ tự động tắt khi chuột di chuyển ra khỏi phần tử. Do đó, bất kỳ kiểu nào được áp dụng khi di chuột sẽ tự động được đảo ngược. Mặt khác, với cách tiếp cận javascript, bạn sẽ phải xác định cả sự kiện "onmouseover" và "onmouseout". Nếu bạn chỉ xác định "onmouseover", các kiểu được áp dụng "onmouseover" sẽ vẫn tồn tại ngay cả sau khi bạn di chuột ra ngoài trừ khi bạn đã xác định rõ ràng "onmouseout".

CHỈNH SỬA: Câu trả lời này không còn đúng nữa. CSS được hỗ trợ tốt và Javascript (đọc: JScript) hiện được yêu cầu khá nhiều cho bất kỳ trải nghiệm web nào và một số người vô hiệu hóa javascript.

Câu trả lời ban đầu, theo ý kiến ​​của tôi vào năm 2009.

Off đỉnh đầu của tôi:

Với CSS, bạn có thể gặp sự cố với hỗ trợ trình duyệt.

Với JScript, mọi người có thể vô hiệu hóa jscript (đó là những gì tôi làm).

Tôi tin rằng phương pháp ưa thích là thực hiện nội dung bằng HTML, Bố cục bằng CSS và bất kỳ thứ gì động trong JScript. Vì vậy, trong trường hợp này, bạn có thể muốn sử dụng phương pháp CSS.

Có một sự khác biệt khác cần ghi nhớ giữa hai điều này. Với CSS, :hovertrạng thái luôn bị tắt khi chuột di chuyển khỏi một phần tử. Tuy nhiên, với JavaScript, onmouseoutsự kiện không được kích hoạt khi con chuột di chuyển khỏi phần tử trên chrome của trình duyệt thay vì vào phần còn lại của trang.

Điều này xảy ra thường xuyên hơn bạn có thể nghĩ, đặc biệt là khi bạn đang tạo thanh điều hướng ở đầu trang của mình với các trạng thái di chuột tùy chỉnh.

Trong Internet Explorer, phải khai báo <! DOCTYPE> để bộ chọn: hover hoạt động trên các phần tử khác ngoài phần tử <a>.

Sử dụng CSS, nó giúp quản lý phong cách dễ dàng hơn nhiều.

Liên quan đến việc sử dụng jQuery để di chuột , tôi luôn sử dụng plugin HoverIntent vì nó không kích hoạt sự kiện cho đến khi bạn tạm dừng trên một phần tử trong một khoảng thời gian ngắn ... điều này sẽ ngừng kích hoạt nhiều chuột qua các sự kiện nếu bạn vô tình chạy di chuột qua chúng hoặc đơn giản trong khi chọn một tùy chọn.

Nếu bạn không cần hỗ trợ 100% cho IE6 với javascript bị vô hiệu hóa, bạn có thể sử dụng một cái gì đó như ie7-js với nhận xét có điều kiện của IE. Sau đó, bạn chỉ cần sử dụng các quy tắc css để áp dụng hiệu ứng di chuột. Tôi không biết chính xác nó hoạt động như thế nào nhưng nó sử dụng javascript để làm cho nhiều quy tắc css hoạt động không bình thường trong IE7 và 8.