परिवर्तन: जावास्क्रिप्ट के साथ सीएसएस संपत्तियों को होवर करें

Question 1

मुझे सीएसएस को बदलने का एक तरीका खोजने की जरूरत है: जावास्क्रिप्ट का उपयोग करके संपत्तियों को हॉवर करें।

उदाहरण के लिए, मान लें कि मेरे पास यह HTML कोड है:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

और निम्नलिखित सीएसएस कोड:

table td:hover {
background:#ff0000;
}

मैं <td> होवर गुणों को बदलने, कहने के लिए जावास्क्रिप्ट का उपयोग करना चाहूंगा, पृष्ठभूमि: # 00ff00। पता है कि मैं जावास्क्रिप्ट का उपयोग करके शैली की पृष्ठभूमि की संपत्ति तक पहुँच सकता हूं:

document.getElementsByTagName("td").style.background="#00ff00";

लेकिन मैं इसके लिए एक जावास्क्रिप्ट के बराबर नहीं जानता: हॉवर। मैं इन <td> का उपयोग कैसे करूँ: जावास्क्रिप्ट का उपयोग करके होवर पृष्ठभूमि?

आपकी मदद बहुत ही सराहनिय है!

Question 2

छद्म वर्ग जैसे :hoverकभी किसी तत्व को संदर्भित नहीं करते हैं, लेकिन किसी भी तत्व को जो स्टाइलशीट नियम की शर्तों को पूरा करता है। आपको स्टाइलशीट नियम को संपादित करने की आवश्यकता है , एक नया नियम जोड़ें, या एक नया स्टाइलशीट जोड़ें जिसमें नया :hoverनियम शामिल हो।

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

Question 3

आप जावास्क्रिप्ट के माध्यम से वास्तविक चयनकर्ता को बदल या बदल नहीं सकते:hover । हालाँकि, आप mouseenterशैली को बदलने के लिए उपयोग कर सकते हैं, और वापस पर वापस ला सकते हैं mouseleave(धन्यवाद, @ ब्रायन)।

Question 4

आप क्या कर सकते हैं अपनी वस्तु की कक्षा को बदल दें और विभिन्न होवर गुणों के साथ दो वर्गों को परिभाषित करें। उदाहरण के लिए:

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

और यह मैंने पाया: जावास्क्रिप्ट के साथ एक तत्व वर्ग बदलें

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");

Question 5

इस पेज को 7 साल बहुत देर से पाने के लिए क्षमा करें, लेकिन इस समस्या को हल करने का एक बहुत सरल तरीका है (होवर शैली को मनमाने ढंग से बदलना):

HTML:

<button id=Button>Button Title</button>

सीएसएस:

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

जावास्क्रिप्ट:

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

Question 6

यदि यह आपके उद्देश्य को पूरा करता है तो आप बिना css का उपयोग किए और havav की कार्यक्षमता को onmouseoverजावास्क्रिप्ट में ईवेंट के बिना जोड़ सकते हैं

यहाँ एक कोड स्निपेट है

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>

Question 7

बहुत पुराना सवाल है, इसलिए मुझे लगा कि मैं और अधिक आधुनिक उत्तर दूंगा। अब सीएसएस चर व्यापक रूप से समर्थित हैं जिनका उपयोग जेएस घटनाओं की आवश्यकता के बिना इसे प्राप्त करने के लिए किया जा सकता है या !important।

ओपी का उदाहरण लेते हुए:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

अब हम इसे CSS में कर सकते हैं:

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

और जावास्क्रिप्ट का उपयोग कर मंडराना राज्य जोड़ें जैसे:

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

यहाँ एक कार्यशील उदाहरण है https://codepen.io/ybentz/pen/RwPoeqb

Question 8

जब आप उस उपकरण को स्पर्श का समर्थन करते हैं, तो मैं सभी :hoverसंपत्तियों को बदलने की सलाह :activeदूंगा। जब आप ऐसा करते हैं तो बस इस फ़ंक्शन को कॉल करेंtouch()

   function touch() {
      if ('ontouchstart' in document.documentElement) {
        for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
          var sheet = document.styleSheets[sheetI];
          if (sheet.cssRules) {
            for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
              var rule = sheet.cssRules[ruleI];

              if (rule.selectorText) {
                rule.selectorText = rule.selectorText.replace(':hover', ':active');
              }
            }
          }
        }
      }
    }

Question 9

मुझे एक बार इसकी आवश्यकता थी और इसके लिए एक छोटी सी लाइब्रेरी बनाई, जो सीएसएस दस्तावेजों को बनाए रखती है

https://github.com/terotests/css

उसके साथ आप राज्य कर सकते हैं

css().bind("TD:hover", {
        "background" : "00ff00"
    });

यह ऊपर उल्लिखित तकनीकों का उपयोग करता है और क्रॉस-ब्राउज़र के मुद्दों का ध्यान रखने की भी कोशिश करता है। यदि किसी कारण से IE9 जैसे पुराने ब्राउज़र मौजूद है, तो यह STYLE टैग की संख्या को सीमित कर देगा, क्योंकि पुराने IE ब्राउज़र में पेज पर उपलब्ध STYLE टैग की संख्या के लिए यह अजीब सीमा थी।

इसके अलावा, यह टैग को केवल समय-समय पर अपडेट करके ट्रैफ़िक को सीमित करता है। एनीमेशन कक्षाएं बनाने के लिए एक सीमित समर्थन भी है।

Question 10

वैश्विक संस्करण की घोषणा करें:

var td

फिर अपने गिनी पिग <td>को उसके द्वारा प्राप्त करना चुनें id, यदि आप उन सभी को बदलना चाहते हैं

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

एक समारोह शुरू किया जा करने के लिए और एक पाश अपने वांछित के सभी बदलने के लिए बनाने tdके

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

अपनी सीएसएस शीट पर जाएं:

.yournewclass:hover { background-color: #00ff00; }

और वह यह है कि, इसके साथ आप अपने सभी <td>टैगों को प्राप्त करने में सक्षम हो जाते हैं background-color: #00ff00;जब इसकी सीएसएस प्रोप्राइटी को सीधे बदलकर (सीएसएस कक्षाओं के बीच स्विच करके) होवर किया जाता है।

Question 11

यह वास्तव में CSS को सेल में नहीं जोड़ रहा है, लेकिन समान प्रभाव देता है। ऊपर के अन्य लोगों के समान परिणाम प्रदान करते समय, यह संस्करण मेरे लिए थोड़ा अधिक सहज है, लेकिन मैं एक नौसिखिया हूं, इसलिए इसे इस लायक लें:

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

इसके लिए उन सभी कोशिकाओं के लिए कक्षा निर्धारित करने की आवश्यकता होती है जिन्हें आप "hoverCell" पर प्रकाश डालना चाहते हैं।

Question 12

आप एक सीएसएस चर बना सकते हैं, और फिर इसे जेएस में बदल सकते हैं।

:root {
  --variableName: (variableValue);
}

जेएस में इसे बदलने के लिए, मैंने ये आसान काम किए हैं:

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

तथा

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

आप जितने चाहें उतने सीएसएस चर बना सकते हैं, और मुझे कार्यों में कोई बग नहीं मिला है; उसके बाद, आपको बस इसे अपने CSS में एम्बेड करना है:

table td:hover {
  background: var(--variableName);
}

और फिर bam, एक समाधान जो बस कुछ CSS और 2 JS फ़ंक्शन की आवश्यकता है!

Question 13

होवर जैसे नियंत्रण के लिए आप माउस ईवेंट का उपयोग कर सकते हैं। उदाहरण के लिए, जब आप उस तत्व को प्राप्त करते हैं, तो निम्न कोड दिखाई दे रहा है।

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

Question 14

यदि आप हल्के html ux lang का उपयोग करते हैं, तो यहां एक उदाहरण देखें , लिखें:

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

उपरोक्त कोड css करता है: होवर मेटाटैग।