css - english - एक सीएसएस होवर घटना पर, क्या मैं एक और div की स्टाइल बदल सकता हूं?



php (3)

संभावित डुप्लिकेट:
क्या एक तत्व पर होवर करने और एक अलग तत्व को प्रभावित करने का कोई तरीका है?

जब मैं "ए" की आईडी के साथ एक div या class पर होवर करता हूं, तो क्या मुझे "बी" की आईडी के साथ एक div या class का पृष्ठभूमि रंग मिल सकता है?

https://src-bin.com


Answer #1

JQuery के बिना एक शुद्ध समाधान:

जावास्क्रिप्ट (हेड)

function chbg(color) {
    document.getElementById('b').style.backgroundColor = color;
}   

एचटीएमएल (बॉडी)

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>

JSFiddle: http://jsfiddle.net/YShs2/


Answer #2

निम्न उदाहरण jQuery पर आधारित है लेकिन इसे किसी भी जेएस उपकरण किट या यहां तक ​​कि सादे पुराने जेएस का उपयोग करके हासिल किया जा सकता है

$(document).ready(function(){
     $("#a").mouseover(function(){
         $("#b").css("background-color", "red");
     });
});

Answer #3

हां, आप ऐसा कर सकते हैं, लेकिन केवल अगर #b HTML में #a बाद है।

#b के तुरंत बाद #a आता है: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

वह आसन्न भाई संयोजक ( + ) का उपयोग कर रहा है।

यदि #a और #a बीच अन्य तत्व हैं, तो आप इसका उपयोग कर सकते हैं: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

वह सामान्य भाई संयोजक ( ~ ) का उपयोग कर रहा है।

दोनों आधुनिक ब्राउज़रों और आईई 7 + में + और ~ दोनों काम करते हैं

यदि #a ए का वंशज है, तो आप बस #a:hover #b उपयोग कर सकते हैं।

वैकल्पिक: आप पहले से पहले दूसरे तत्व को पोजीशन करके ऐसा करने के लिए शुद्ध सीएसएस का उपयोग कर सकते हैं। पहला div मार्कअप में पहला है, लेकिन दाईं ओर या दूसरे के नीचे स्थित है। यह काम करेगा जैसे कि यह पिछले भाई थे।





css