/ / ड्रॉपडाउन ट्रिगर दृश्य "सक्रिय" जैसे "होवर" [फाउंडेशन 6] - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -6

ड्रॉपडाउन ट्रिगर विज़ुअल "एक्टिव" जैसे "होवर" [फाउंडेशन 6] - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -6

मूल होवर ड्रॉपडाउन-फलक के लिए नीचे दिए गए कोड को देखें:

<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>

<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
<div class="row">
<div class="medium-12 columns">
<p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
</div>
</div>
</div>

अब मैं क्या करना चाहता हूं कि जबउपयोगकर्ता उस ड्रॉपडाउन-फलक के भीतर कोई भी सामग्री देख रहा है, बटन को ट्रिगर करने वाले बटन में एक दृश्य संकेतक है कि यह "सक्रिय" ट्रिगर है। यहां एक तस्वीर उदाहरण है: उदाहरण 1 उदाहरण 2

कोई भी अंतर्दृष्टि जो आप प्रदान कर सकते हैं उसकी बहुत सराहना की जाएगी।

उत्तर:

उत्तर № 1 के लिए 1

फाउंडेशन आपने यहां कवर किया है।

जब .dropdown-pane (सामग्री रैपर) सक्रिय है, बटन वर्ग दिया जाता है .hover (भ्रमित नहीं होना चाहिए :hover राज्य)।

तो आप बस उसमें विशिष्ट शैलियों को जोड़ सकते हैंकक्षा (यदि आप विभिन्न परिदृश्यों में कई अलग-अलग प्रकार के प्रभाव चाहते हैं तो अपने बटन के सापेक्ष)। आपको मैन्युअल रूप से यह सुनिश्चित करना होगा कि आपका फाउंडेशन :hover आपका नया मिलान .hover राज्य।

एचटीएमएल (उदा।)

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>


<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>

सीएसएस

.button.hover,
.button:hover{
background-color: green;
}

कार्य उदाहरण: https://jsfiddle.net/tymothytym/8re4jcy0/ << इस उदाहरण में (और ऊपर) मैं मैन्युअल रूप से सेटिंग कर रहा हूँ :hover तथा .hover क्योंकि मैंने एक डिफ़ॉल्ट एफ 6 सीएसएस बिल्ड का उपयोग किया है जिसमें एक सेट है :hover राज्य लेकिन अगर आप पहले ही सेट कर चुके हैं :hover (उदाहरण के लिए green) आपको इसे फिर से सेट करने की आवश्यकता नहीं है।


जवाब के लिए 0 № 2

सीएसएस का प्रयोग करें। आच्छादित बटन की शैली ढूंढें और या तो एक: होवर छद्म वर्ग बनाएं और शैली को इस तरह लागू करें या आप उस तत्व को कक्षा जोड़ने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं जिसमें सटीक सीएसएस होगा जो बटन पर आच्छादित हो।

.element: मंडराना { यहां शैलियों को जोड़ें }

या

var element = document.getElementByClassName ("। className");

element.addClass ( "। classToAdd");