सीएसएस

Question

से फ़ंक्शन से जावास्क्रिप्ट को कॉल करना क्या कोई तरीका है कि मैं अपने जावास्क्रिप्ट फ़ंक्शन को सीएसएस से कॉल कर सकता हूं?

पूर्व यहां के लिए शैली है:

.first-nav li a:hover, 
.first-nav li.hover a { 
    margin:-3px 0 -1px; 
    height:30px; 
    position:relative; 
    background:url(../images/nav-hover.jpg) no-repeat; 
} 

और मैं लंगर होवर होने पर जे एस समारोह कॉल करना चाहते हैं।

Answer 1

नहीं, आप सीधे सीएसएस से जावास्क्रिप्ट को चालू नहीं कर सकते हैं।

क्या आप कर सकते हैं उन तत्वों को ढूंढने के लिए सीएसएस चयनकर्ताओं का उपयोग करें जिन्हें आप देखना चाहते हैं, और फिर माउस ईवेंट के लिए देखें। मानक घटनाओं mouseover और mouseout हैं, लेकिन वे थोड़ी सूझबूझ के साथ क्योंकि वे बुलबुला (आप mouseout मिलता है, उदाहरण के लिए, जब भी माउस किसी भी वंशज तत्व छोड़ देता है) काम करने के लिए हो सकता है। उचित तर्क के साथ, हालांकि, वे नहीं बुरा करने के लिए साथ काम करने वाले हैं, और वास्तव में अगर आप इन के बहुत सारे है, तो आप शायद नीचे विकल्प के बजाय mouseover और mouseout उपयोग करने के लिए है क्योंकि आप उन पर सिर्फ एक पैरेंट कंटेनर सेट कर सकते हैं करना चाहते हैं और फिर काम करें कि कौन सा वंशज तत्व शामिल है, जो कुछ मामलों में सरल हो सकता है (और दूसरों में अधिक जटिल)।

आईई mouseenter और mouseleave प्रदान करता है जो काम करने के लिए बहुत आसान है क्योंकि वे बबल नहीं करते हैं, लेकिन (निश्चित रूप से) आईई-विशिष्ट। ये इतने आसान हैं कि ढांचे उन ब्राउज़रों में भी उनका समर्थन करना शुरू कर रहे हैं जो नहीं करते हैं; उदाहरण के लिए Prototype और jQuery उन्हें प्रदान करते हैं, और कुछ अन्य ढांचे के साथ-साथ मैं भी आश्चर्यचकित नहीं होगा।

// jQuery 
$(".first-nav li a").hover(
    function(event) { 
     // The mouse has entered the element, can reference the element via 'this' 
    }, 
    function (event) { 
     // The mouse has left the element, can reference the element via 'this' 
    } 
); 

... जो mouseenter और mouseleave संचालकों की स्थापना के लिए वास्तव में सिर्फ एक शॉर्टकट, लेकिन अभी भी, अद्भुत संक्षिप्त है: jQuery भी काम hover समारोह, जो बहुत ही आप क्या चाहते हैं के करीब होगा प्रदान करता है।

// Prototype 
$$(".first-nav li a") 
    .invoke("observe", "mouseenter", function(event) { 
     // The mouse has entered the element, can reference the element via 'this' 
    }) 
    .invoke("observe", "mouseleave", function(event) { 
     // The mouse has left the element, can reference the element via 'this' 
    }); 

(ओटी:

प्रोटोटाइप में यह काफी समान है। दोनों ही मामलों में, मैं का उपयोग किया है गुमनाम इनलाइन समारोह भाव सिर्फ धारणा में नामित किया कार्यों का उपयोग करने के लिए है देने से बचने के लिए मैं हमेशा की सिफारिश , उत्पादन कोड में नामित कार्यों का उपयोग कर यद्यपि।)

Answer 2

सं

(ठीक है, माइक्रोसॉफ्ट भाव और मोज़िला बाइंडिंग यह अनुमति दे सकते हैं, लेकिन दोनों मालिकाना कर रहे हैं और बचा जाना चाहिए)

जावास्क्रिप्ट से अपने ईवेंट हैंडलर्स असाइन करें। वाईयूआई और jQuery जैसे पुस्तकालय आपको सीएसएस चयनकर्ताओं का उपयोग करने के लिए लागू करने के लिए तत्व चुनने की अनुमति देते हैं। Event delegation आपको प्रत्येक व्यक्ति को स्पष्ट रूप से असाइन किए बिना तत्वों पर ईवेंट को संभालने की अनुमति देता है (जो आसान है यदि आप उन्हें लोड होने के बाद दस्तावेज़ में जोड़ रहे हैं)।

Answer 3

क्यों आप अपने सीएसएस से इसे कहते आप चाहते हैं, "लंगर होवर होने पर जे एस समारोह कॉल करने के लिए" अपना टैग में रखते अगर होगा:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("a").hover(function(){ 
     myFunctionInvoke(); 
    }); 
}); 
</script> 

या आप मन सिर्फ परिवर्तन में विशेष लंगर अगर चयनकर्ता

Answer 4

क्योंकि यह सीएसएस से यह करने के लिए अधिक तार्किक है।

यदि कोई लिंक बनाना चाहता है तो होवर पर क्लिक करें, यह एक सौंदर्य गुणवत्ता है और इसे सीएसएस के साथ संभाला जाना चाहिए। उदाहरण के लिए:

#header_menu li a:hover{ 
    color:white; 
    js:click(); 
} 

Answer 5

असल में। हाँ तुम कर सकते हो। बस जावास्क्रिप्ट का उपयोग करें: पृष्ठभूमि-यूआरएल में:

<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE> 

हालांकि यह पूरी तरह से सुनिश्चित नहीं है कि यह काम करेगा या नहीं।

चीयर्स!