Alter class when hovering siblings first child

Question

Say I have:

<div class="block-one"></div>
<div class="block-two">
    <div></div>
    <div></div>
    <div></div>
</div>

When the first child of block-two is being hovered I'd like to alter the css of block-one. How can this be done with SASS/SCSS? I have tried:

.block-two {
    div:first-child:hover {
    }
}

Can't get anything to work with the hover, have tried & + &, @at-root.

You will have to use javascript for this. CSS or SASS only allows you to change the CSS of the children of the element your hovering. — HTMLNoob, Mar 30 '16 at 20:42
Possible duplicate to http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector and http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — Stickers, Mar 30 '16 at 20:56

score 1 · Answer 1 · answered Mar 30 '16 at 20:42

1

This can be easily done with jQuery:

$(".block-two").hover(
  function() {
    //Mouse is over the element
    $(".block-one").css({"background-color": "#333"});
  },
  function() {
    //Mouse left the element
    $(".block-one").css({"background-color": "#fff"});
  }
);

answered Mar 30 '16 at 20:42

Axel

518
6
15

hey Axel, no need to have a mouse out event handler, you can specify with CSS the default behavior and JavaScript will only apply the changed behavior on hover... just like you'd normally do in CSS – AGE Mar 30 '16 at 20:44
Well ok but i'm doing it like this – Axel Mar 30 '16 at 20:45

score 1 · Answer 2 · answered Mar 30 '16 at 20:42

1

Sorry to say but selecting the parent's sibling is not possible from a CSS point of view, because CSS will not allow you to see above the selection tree in that way.

Using JavaScript/jQuery however is the best approach right now, here is an example:

$(".block-two > :first-child").hover(function(){
    $(".block-one").css("color", "red");
});

To be clear on this approach, it's ok to rely on it because you will not be able to accomplish this desired effect via CSS alone.

answered Mar 30 '16 at 20:42

AGE

3,389
3
34
56

What if I put block-one inside block-two as its first child. Then I target block-two:nth-child(2) to target the second child. Can I then alter it? – Mar 30 '16 at 20:54
@ThingWings You will be able to using the **[adjacent sibling selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)** `+`, it will look like this: `.block-two > :first-child:hover + .block-two > nth-child(2)` assuming you want to hover on the first child and change the second child. The point is that the child must come immediately after the selected child, not before – AGE Mar 30 '16 at 20:56
The nth-child(2) would be the one that needs to be hovered and altering the first-child – Mar 30 '16 at 21:01
@ThingWings in that case you will need to reverse the order so that the `+` selector works accordingly. You might also want to be careful towards using it in IE7 or below. – AGE Mar 30 '16 at 21:03
Isn't the problem that I need the previous element rather than the next? So its almost like i need a minus operator not plus? – Mar 30 '16 at 21:08
@ThingWings you are correct however such selector does not exist. The current way that CSS parses selectors is what is in your way. There might be a way but it is certainly not out there nor is it cross browser compatible. That is why the javascript solution is simply much more straight forward. – AGE Mar 30 '16 at 21:13

Alter class when hovering siblings first child

2 Answers2