सीएसएस: अन्य तत्व पर होवर?

Question

संक्षिप्त प्रश्न: क्यों बदलता है जब मैं होवर करता हूं? .a?

सीएसएस

.a { 
    color: red; 
} 

.b { 
    color: orange; 
} 

.a:hover .b { 
    background-color: blue; 
} 

एचटीएमएल

<div id="wrap"> 
    <div class="a">AAAA</div> 
    <div class ="b">BBBB</div> 
</div> 

http://jsfiddle.net/2NEgt/

Answer 1

आप की तरह

<div class="a">AAAA 
    <div class ="b">BBBB</div> 
</div> 

एक संरचना के लिए काम कुछ बिंदु पर आप ए और .b के बीच कुछ तत्वों की आवश्यकता होगी तो होगा .a:hover .b

.a:hover .b के बजाय .a:hover + .b की आवश्यकता है , तो आपको .a:hover ~ .b का उपयोग करने की आवश्यकता होगी, जो .a के सभी भाई बहन के बाद आने वाले सभी भाइयों के लिए काम करता है, केवल अगले ही नहीं।

डेमो http://jsfiddle.net/thebabydino/EajKf/

Answer 2

क्योंकि, ए का एक बच्चा नहीं है .b ताकि चयनकर्ता कुछ भी नहीं मिल रहा है। ऐसा करने के लिए जावास्क्रिप्ट का उपयोग करें जो आप वहां करना चाहते हैं।

Answer 3

जब किसी ईवेंट को किसी भिन्न तत्व पर होता है तो आपको भाई की शैली नहीं बदलनी चाहिए। यह सीएसएस के संदर्भ से बाहर है।

उपयोग जावास्क्रिप्ट इस लक्ष्य को हासिल करने के लिए, उदाहरण के लिए:

var wrap = document.getElementById("wrap"); 
var aDiv = wrap.getElementsByClassName("a")[0]; 
var bDiv = wrap.getElementsByClassName("b")[0]; 
aDiv.onmouseover = function() { 
    bDiv.style.backgroundColor = "red"; 
}; 
aDiv.onmouseout = function() { 
    bDiv.style.backgroundColor = "white"; 
}; 

Answer 4

आप a:hover + b की तरह कुछ भी नहीं कर सकते हैं? देख http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 5

आप + चयनकर्ता

.a:hover > .b { 
    background-color: blue; 
} 

नेस्टेड वर्ग के लिए

उपयोग कर सकते हैं

.a:hover + .b { 
    background-color: blue; 
} 

भाई तत्व के लिए सीएसएस लागू करने के लिए, या।

Answer 6

दो चीजें हैं जो आप कर सकते हैं।

या तो .b.a

<div id="wrap"> 
    <div class="a">AAAA 
     <div class ="b">BBBB</div>   
    </div> 
</div> 

या

बदलें अपने सीएसएस का एक बच्चा बनाने के लिए अपने HTML बदलने आसन्न चयनकर्ता

.a:hover + .b { 
    background-color: blue; 
} 

Answer 7

कोई js जरूरत http://jsfiddle.net/2NEgt/3/

Answer 8

उपयोग करने के लिए इसे समझने की कोशिश करो उदाहरण:
एचटीएमएल कोड

<p>Hover over 1 and 3 gets styled.</p> 
<div id="one" class="box">1</div> 
<div id="two" class="box">2</div> 
<div id="three" class="box">3</div> 

<!--css--> 
#one:hover ~ #three{ 
background-color: black; 
color: white; 
} 
.box { 
cursor: pointer; 
display: inline-block; 
height: 30px; 
line-height: 30px; 
margin: 5px; 
outline: 1px solid black; 
text-align: center; 
width: 30px; 
} 

जब आप बॉक्स 3 से बॉक्स 1 पर मंडराना काले रंग मिल जाएगा

Answer 9

Jquery एक अच्छा और आसान उपाय है:

एचटीएमएल:

<div class="a">AAA</div> 
<div class="b">BBB</div> 

स्क्रिप्ट: यदि आप चाहें तो इस स्क्रिप्ट को अपने एचटीएमएल में रखें। बस इतना ही।

<script> 
     $(".a").mouseover(function(){ 
     $(".b").css("color", "blue"); 
     }); 
     $(".a").mouseleave(function(){ 
     $(".b").css("color", "red"); 
     }); 
</script>