CSS: एक तत्व होवर, कई तत्वों के लिए प्रभाव?

Question 1

मैं अपने मँडरा मुद्दे के लिए एक विधि की तलाश कर रहा हूँ।

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

अब, दोनों वर्गों, छवि और परत, की सीमाएं हैं। सामान्य और होवर के लिए दोनों का रंग अलग है। क्या इसे बनाने का कोई तरीका है, इसलिए अगर मैं लेयर क्लास को हॉवर करता हूं, तो लेयर और इमेज क्लास दोनों की बॉर्डर कलर सक्रिय है? और वाइस वर्सा?

Question 2

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

कुछ सीएसएस करेंगे। यहाँ एक उदाहरण है:

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

स्निपेट का विस्तार करें

Question 3

यह मेरे लिए फ़ायरफ़ॉक्स और क्रोम और IE8 में काम किया ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... आप IE6 के साथ भी इसका परीक्षण करना चाहते हैं (मुझे यकीन नहीं है कि यह वहां काम करेगा)।

Question 4

मुझे लगता है कि आपके लिए सबसे अच्छा विकल्प एक और div द्वारा दोनों divs को जोड़ना है। फिर आप इसे सीएसएस द्वारा निम्नलिखित तरीके से बना सकते हैं:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

Question 5

यह हासिल करना मुश्किल नहीं है, लेकिन आपको जावास्क्रिप्ट onmouseoverफ़ंक्शन का उपयोग करने की आवश्यकता है । Pseudoscript:

<div class = "अनुभाग">

<div class = "image"> <img src = "myImage.jpg" onmouseover = "। layer {बॉर्डर: 1px सॉलिड ब्लैक;} .image {बॉर्डर: 1px सॉलिड ब्लैक;}" /> </ div>;

<div class = "layer"> लोरम इप्सम </ div>

</ Div>

अपने खुद के रंगों का उपयोग करें। आप माउस कमांड में जावास्क्रिप्ट कार्यों को भी संदर्भित कर सकते हैं।

Question 6

मुझे लगता है कि यह पूरा करने के लिए आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

मूल्यों और तत्व आईडी के अनुसार समायोजित करें :)

Question 7

या

.section:hover > div {
  background-color: #0CF;
}

नोट पेरेंट एलिमेंट स्थिति केवल बच्चे के एलिमेंट स्टेट को प्रभावित कर सकती है ताकि आप उपयोग कर सकें:

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

लेकिन आप नहीं कर सकते हैं का उपयोग करें

.layer:hover + .image {
  background-color: #0CF;
}