सीएसएस होवर बनाम जावास्क्रिप्ट माउसओवर [बंद]

Question 1

बंद हो गया । यह सवाल राय आधारित है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि इस पोस्ट को संपादित करके तथ्यों और उद्धरणों के साथ उत्तर दिया जा सके ।

1 साल पहले बंद हुआ ।

इस प्रश्न को सुधारें

ऐसे समय होते हैं जब मेरे पास एक सीएसएस तत्व का उपयोग करने के बीच एक विकल्प होता है: किसी पृष्ठ पर HTML तत्वों की उपस्थिति को नियंत्रित करने के लिए होवर या जावास्क्रिप्ट ऑनमूवर। निम्नलिखित परिदृश्य पर विचार करें जहां एक div एक इनपुट लपेटता है

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

मैं चाहता हूं कि जब माउस कर्सर div पर हो तो बैकग्राउंड कलर बदलने के लिए इनपुट चाहिए। सीएसएस दृष्टिकोण है

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

<div><input></div>

जावास्क्रिप्ट दृष्टिकोण है

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

प्रत्येक दृष्टिकोण के फायदे और नुकसान क्या हैं? क्या सीएसएस दृष्टिकोण अधिकांश वेब ब्राउज़रों के साथ अच्छी तरह से काम करता है? क्या css की तुलना में JavaScript धीमी है?

Question 2

के साथ समस्या: मंडराना है कि IE6 केवल लिंक पर इसका समर्थन करता है। मैं इन दिनों इस तरह की चीजों के लिए jQuery का उपयोग करता हूं:

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

चीजों को बहुत आसान बनाता है। वह IE6, FF, Chrome और Safari में काम करेगा।

Question 3

CSS एक बहुत अधिक बनाए रखने योग्य और पठनीय है।

Question 4

क्यों न दोनों? एनिमेटेड प्रभाव के लिए jQuery का उपयोग करें और सीएसएस फॉलबैक के रूप में। यह आपको सुंदर घटाव के साथ jQuery के लाभ देता है ।

सीएसएस:

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);
  }
);

डेमो

Question 5

इसे जावास्क्रिप्ट में करने का एक अतिरिक्त लाभ यह है कि आप समय में विभिन्न बिंदुओं पर होवर प्रभाव को जोड़ सकते हैं / हटा सकते हैं - जैसे कि टेबल की पंक्तियों में होवर रंग बदलता है, होवर प्रभाव को अक्षम करता है और स्थान मोड में संपादित करना शुरू करता है।

Question 6

एक बहुत बड़ा अंतर यह है कि जब माउस तत्व से बाहर निकलता है तो ": होवर" स्थिति स्वचालित रूप से निष्क्रिय हो जाती है। परिणामस्वरूप कोई भी शैली जो होवर पर लागू होती है, स्वतः ही उलट जाती है। दूसरी ओर, जावास्क्रिप्ट दृष्टिकोण के साथ, आपको "ऑनमाउसओवर" और "ऑनमाउसआउट" दोनों घटनाओं को परिभाषित करना होगा। यदि आप केवल "onmouseover" को परिभाषित करते हैं, तो "onmouseover" लागू होने वाली शैलियाँ आपके माउस से बाहर निकलने के बाद भी बनी रहेंगी, जब तक कि आपने "onmouseout" को स्पष्ट रूप से परिभाषित नहीं किया है।

Question 7

संपादित करें: यह उत्तर अब सही नहीं है। CSS अच्छी तरह से समर्थित जावास्क्रिप्ट है (पढ़ें: JScript) अब किसी भी वेब अनुभव के लिए बहुत आवश्यक है, और कुछ लोग जावास्क्रिप्ट को अक्षम करते हैं।

मूल जवाब, 2009 में मेरी राय के रूप में।

मेरे सर के ऊपर से चला गया:

CSS के साथ, आपके पास ब्राउज़र समर्थन के साथ समस्याएँ हो सकती हैं।

JScript के साथ, लोग jscript को निष्क्रिय कर सकते हैं (यानी मैं क्या करूँ)।

मेरा मानना है कि पसंदीदा तरीका HTML में सामग्री, CSS के साथ लेआउट, और JScript में कुछ भी गतिशील है। तो इस उदाहरण में, आप शायद सीएसएस दृष्टिकोण लेना चाहते हैं।

Question 8

दोनों के बीच ध्यान रखने के लिए एक और अंतर है। सीएसएस के साथ, :hoverराज्य हमेशा निष्क्रिय रहता है जब माउस एक तत्व को स्थानांतरित करता है। हालांकि, जावास्क्रिप्ट के साथ, onmouseoutघटना को निकाल नहीं दिया जाता है जब माउस शेष पेज के बजाय ब्राउज़र क्रोम पर तत्व को स्थानांतरित करता है।

यह आपके विचार से अधिक बार होता है, खासकर जब आप कस्टम होवर राज्यों के साथ अपने पृष्ठ के शीर्ष पर एक नावबार बना रहे होते हैं।

Question 9

Internet Explorer में, <MMO तत्व के अलावा अन्य तत्वों पर काम करने के लिए hover चयनकर्ता के लिए <! DOCTYPE> घोषित किया जाना चाहिए।

Question 10

CSS का उपयोग करें, यह स्टाइल के बहुत आसान प्रबंधन के लिए खुद को बनाता है।

Question 11

होवर करने के लिए jQuery का उपयोग करने के संबंध में , मैं हमेशा प्लगइन HoverIntent का उपयोग करता हूं क्योंकि यह घटना को आग नहीं देता है जब तक कि आप समय की संक्षिप्त अवधि के लिए एक तत्व पर रोक नहीं देते हैं ... यदि आप गलती से चलाते हैं तो यह बहुत अधिक माउस को बंद कर देता है। उन पर माउस या बस एक विकल्प का चयन करते हुए।

Question 12

यदि आपको जावास्क्रिप्ट के साथ IE6 के लिए 100% समर्थन की आवश्यकता नहीं है, तो आप IE सशर्त टिप्पणियों के साथ ie7-js जैसे कुछ का उपयोग कर सकते हैं । तो फिर तुम बस hover प्रभाव लागू करने के लिए सीएसएस नियमों का उपयोग करें। मुझे ठीक से पता नहीं है कि यह कैसे काम करता है, लेकिन यह IE7 और 8 में सामान्य रूप से काम नहीं करने वाले कई सीएसएस नियमों का काम करने के लिए जावास्क्रिप्ट का उपयोग करता है।