how to apply the style using css3

Question

I have a below div and css,

.parent:hover{
  background-color:violet;
}
.child:hover{
  background-color:grey;
}

<div style='border:2px solid red;width:200px;height:100px' class='parent'>
</div>
  <div style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>    
  </div>

here i have achieved when i hover the parent the background color violet has been applied as well as child. But i need to achieve when i hover the parent the child class also need to apply to the corresponding div.. as well as when i hover child the parent class also need to apply on that corresponded div how to achieve?

*when i hover child the parent class also need to apply* - That is not possible with CSS. — Harry, May 18 '16 at 05:22
@Harry When you hover child element then its already hover its parent element, you can try. — Harsh Sanghani, May 18 '16 at 05:27
@HarshSanghani: Carefully see the structure in the question and then comment :) — Harry, May 18 '16 at 05:27
@TylerH that one is related to parent sibling but in my scenario there is no parent sibling both r separate div — Akbar Basha, May 18 '16 at 05:50
@AkbarBasha Sibling means at an equal level. AKA two children. Parent means container. What you have in your question are two siblings, and you're trying to apply an effect on the first (the previous) div when hovering on the second (the latter) div. AKA you are trying to get "previous sibling" behavior, which doesn't exist in CSS. — TylerH, May 18 '16 at 05:52

score 2 · Accepted Answer · answered May 18 '16 at 06:22

I tried it buddy

i almost got solution.

.parent:hover + .child{ background-color:violet; }

just add this css and you will get change in both div when u focus on parent div.

it is working on parent because child div is next to parent.

but it'll not work to child because parent is not next to child.

just try my css

score 1 · Answer 2 · answered May 18 '16 at 05:58

1

Unfortunately this cannot be done in css, however it can be done with a little bit of jquery. Here is an example :) https://jsfiddle.net/qky6z3jv/

$(".parent,.child").hover(function() {
  $(".parent").css('background-color','violet');
  $(".child").css('background-color','grey');
}, function() {
  $(".parent,.child").css('background-color','white');
});

answered May 18 '16 at 05:58

kknmalone

11
2

Thanks but i need to achieve using css... – Akbar Basha May 18 '16 at 06:14

score 1 · Answer 3 · answered May 18 '16 at 06:15

you can use simple javascript to do that.

create a function that will change the color of both the divs like assign an "ID" to each div element.

function changeColor(color_value){
    document.getElementById('div1').style.backgroundColor = "'" + color_value + "'";
    // or you can do something like this
    document.getElementById('div1').setAttribute('background-color', color_value);
    // do the same with the second div.          
}

and changes the divs like

<div id="div1" onClick="changeColor('color_hex_value_here')" style='border:2px solid red;width:200px;height:100px' class='parent'

</div>
<div id="div2" onClick="changeColor('color_hex_value_here')"  style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>
</div>

// this can be done without the jQuery or adding any external library // one more this. you wrote two different divs one after the other. // probably the concept that you care trying to achieve is "Child" div inside the "parent" div

Thanks Ali but there is any possible to achieve using css :-) — Akbar Basha, May 18 '16 at 06:22

how to apply the style using css3

3 Answers3