การวางเมาส์เหนือ CSS เทียบกับการวางเมาส์บน JavaScript [ปิด]

มีหลายครั้งที่ฉันมีตัวเลือกระหว่างการใช้องค์ประกอบ CSS: hover หรือ JavaScript onmouseover เพื่อควบคุมลักษณะที่ปรากฏขององค์ประกอบ html บนหน้า พิจารณาสถานการณ์ต่อไปนี้ที่ div ห่ออินพุต

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

ฉันต้องการให้อินพุตเปลี่ยนสีพื้นหลังเมื่อเคอร์เซอร์ของเมาส์วางเมาส์เหนือ div แนวทาง CSS คือ

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

<div><input></div>

วิธีการของ JavaScript คือ

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

แต่ละแนวทางมีข้อดีข้อเสียอย่างไร? แนวทาง CSS ทำงานได้ดีกับเว็บเบราว์เซอร์ส่วนใหญ่หรือไม่? JavaScript ช้ากว่า css หรือไม่

ปัญหาเกี่ยวกับ: hover คือ IE6 รองรับเฉพาะลิงก์เท่านั้น ฉันใช้ jQuery สำหรับสิ่งนี้ในทุกวันนี้:

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

ทำให้สิ่งต่างๆง่ายขึ้นมาก ซึ่งจะทำงานใน IE6, FF, Chrome และ Safari

CSS หนึ่งสามารถบำรุงรักษาและอ่านได้ง่ายกว่ามาก

ทำไมไม่ทั้งสอง? ใช้ jQuery สำหรับเอฟเฟกต์ภาพเคลื่อนไหวและ CSS เป็นทางเลือก นี้จะช่วยให้คุณประโยชน์ของ jQuery กับการย่อยสลายที่สง่างาม

CSS:

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

jQuery (ใช้jQueryUIเพื่อทำให้สีเคลื่อนไหว):

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

การสาธิต

ข้อดีอีกอย่างหนึ่งของการทำในจาวาสคริปต์คือคุณสามารถเพิ่ม / ลบเอฟเฟกต์โฮเวอร์ในช่วงเวลาต่างๆได้เช่นการวางเมาส์เหนือแถวของตารางจะเปลี่ยนสีคลิกปิดใช้เอฟเฟกต์โฮเวอร์และเริ่มแก้ไขในโหมดสถานที่

ความแตกต่างที่ยิ่งใหญ่มากคือสถานะ ": hover" จะปิดใช้งานโดยอัตโนมัติเมื่อเมาส์เคลื่อนออกจากองค์ประกอบ ด้วยเหตุนี้รูปแบบใด ๆ ที่ใช้กับโฮเวอร์จะถูกย้อนกลับโดยอัตโนมัติ ในทางกลับกันด้วยวิธีการใช้จาวาสคริปต์คุณจะต้องกำหนดทั้งเหตุการณ์ "onmouseover" และ "onmouseout" หากคุณกำหนดเฉพาะ "onmouseover" สไตล์ที่ใช้ "onmouseover" จะยังคงมีอยู่แม้ว่าคุณจะเลื่อนเมาส์ออกไปเว้นแต่คุณจะกำหนด "onmouseout" ไว้อย่างชัดเจน

แก้ไข: คำตอบนี้ไม่เป็นจริงอีกต่อไป CSS ได้รับการสนับสนุนเป็นอย่างดีและ Javascript (อ่าน: JScript) นั้นค่อนข้างจำเป็นสำหรับประสบการณ์การใช้งานเว็บใด ๆ และมีเพียงไม่กี่คนที่ปิดการใช้งานจาวาสคริปต์

คำตอบเดิมตามความเห็นของฉันในปี 2009

ปิดด้านบนของหัวของฉัน:

ด้วย CSS คุณอาจมีปัญหากับการรองรับเบราว์เซอร์

ด้วย JScript ผู้คนสามารถปิดใช้งาน jscript (นั่นคือสิ่งที่ฉันทำ)

ฉันเชื่อว่าวิธีที่ต้องการคือการทำเนื้อหาใน HTML, Layout ด้วย CSS และอะไรก็ได้ที่เป็นไดนามิกใน JScript ดังนั้นในกรณีนี้คุณอาจต้องการใช้แนวทาง CSS

มีความแตกต่างอีกประการหนึ่งที่ควรทราบระหว่างทั้งสอง เมื่อใช้ CSS :hoverสถานะจะถูกปิดใช้งานเสมอเมื่อเมาส์เลื่อนออกจากองค์ประกอบ อย่างไรก็ตามด้วย JavaScript onmouseoutเหตุการณ์จะไม่เริ่มทำงานเมื่อเมาส์เคลื่อนออกจากองค์ประกอบไปยังเบราว์เซอร์ Chrome แทนที่จะไปที่ส่วนที่เหลือของหน้า

สิ่งนี้เกิดขึ้นบ่อยกว่าที่คุณคิดโดยเฉพาะอย่างยิ่งเมื่อคุณสร้างแถบนำทางที่ด้านบนสุดของหน้าเว็บด้วยสถานะโฮเวอร์ที่กำหนดเอง

ใน Internet Explorer จะต้องมีการประกาศ <! DOCTYPE> เพื่อให้: hover selector ทำงานกับองค์ประกอบอื่นที่ไม่ใช่องค์ประกอบ <a>

ใช้ CSS มันทำให้การจัดการสไตล์ตัวเองง่ายขึ้นมาก

เกี่ยวกับการใช้ jQuery เพื่อทำโฮเวอร์ฉันมักจะใช้ปลั๊กอินHoverIntentเนื่องจากจะไม่เริ่มเหตุการณ์จนกว่าคุณจะหยุดองค์ประกอบชั่วคราวในช่วงเวลาสั้น ๆ ... สิ่งนี้จะหยุดการยิงเมาส์จำนวนมากเหนือเหตุการณ์หากคุณทำงานโดยไม่ได้ตั้งใจ วางเมาส์เหนือพวกเขาหรือเพียงแค่เลือกตัวเลือก

หากคุณไม่ต้องการการสนับสนุน 100% สำหรับ IE6 ที่ปิดการใช้งานจาวาสคริปต์คุณสามารถใช้บางอย่างเช่นie7-jsกับความคิดเห็นตามเงื่อนไขของ IE จากนั้นคุณก็ใช้กฎ css เพื่อใช้เอฟเฟกต์โฮเวอร์ ฉันไม่รู้ว่ามันทำงานอย่างไร แต่มันใช้ javascript เพื่อทำให้กฎ css จำนวนมากทำงานได้ซึ่งปกติจะไม่ทำงานใน IE7 และ 8