How to affect UPPER elements when a div is hovered?

Question

I've done this, this , and this but gives me no luck. I'm trying to change the color of a div when the lower element is being hovered but I can't do it. I have this HTML structure like so:

  <div class="ms-parent">
      <button type="button" class="ms-choice"></button>
      <div class="ms-drop"></div>
  </div>

Here is what I've tried so far:

  .ms-parent:hover,
  .ms-choice:hover + .ms-drop,
  .ms-drop:hover,
  .ms-choice:hover,
  .ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }

So when .ms-drop is being hovered I want .ms-choice to change its style. What I'm missing here?

there is no parent selector in css, and you cannot do it without javascript — gaurav5430, Aug 14 '14 at 02:39
possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — gaurav5430, Aug 14 '14 at 02:42
@gaurav5430 I think you didn't check the link that I've provided — user3093453, Aug 14 '14 at 04:36
yes it seems i dodnt go through the links in your question... but seems like you have gone through this link already... then is it clear to you now that it might not be possible to do this in css ? — gaurav5430, Aug 14 '14 at 06:30

score 0 · Accepted Answer · answered Aug 14 '14 at 06:07

There is no Upper/previous element selector in CSS. You can select next immediate sibling element using + and you can select all the next siblings element using ~.

Kindly note it down, I mentioned next, because there is no previous selectors right now. Hopefully that will introduce on CSS4. You can use jquery to achieve this. Otherwise if you want to do it in CSS, you need to change the HTML structure like below.

 <div class="ms-parent">
  <div class="ms-drop"></div>
  <button type="button" class="ms-choice"></button>      
 </div>

Now you can target it like below.

 .ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }

Or

 .ms-drop:hover + .ms-choice{ color:#000000!important; background: #ffffff; }

DEMO

How to affect UPPER elements when a div is hovered?

1 Answers1