0

I have this html code

<article>
    <div class="a">
        <div class="a_b"></div>
    </div>
    <div class="c"></div>
</article>

I need to do some changes to div .c on div .a_b hover Can I do this using scss (or native css), without using any javascript code?

pindol
  • 2,110
  • 6
  • 35
  • 52
  • I'm not sure, what are you trying to make? Tooltips, dropdown data? As far as I know you'll have to use javascript or jQuery. – Jeroen Dec 23 '16 at 15:02
  • I need to show div .c when hover on div .a_b – pindol Dec 23 '16 at 15:03
  • No its not possible by just using CSS. There is no link between div.c and div.a_b, scss or any kind of CSS framework get converted to CSS only. – GeekAb Dec 23 '16 at 15:04
  • No, you will have to use javascript or jQuery – Jeroen Dec 23 '16 at 15:05
  • You can use `~` to style siblings, but not parents. See example here: https://jsfiddle.net/aa0zykpe/ - – pol Dec 23 '16 at 15:17
  • 3
    Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – TylerH Dec 23 '16 at 15:43
  • No, i've already tried this solution but it doesn't work. Thanks anyway. I think I'll do it using js.. – pindol Dec 23 '16 at 15:48

1 Answers1

0

You can deploy the :hover pseudo-class (and other pseudo-classes like :focus, :checked, :target etc.) to modify the styles on:

  • the element itself
  • a descendant of that element
  • a subsequent sibling of the element.

In this setup: 

<article>
    <div class="a">
        <div class="a_b"></div>
    </div>
    <div class="c"></div>
</article>

You can apply a pseudo-element to .a and it could modify the styles on .a (itself), .a_b (its child) or .c (its sibling).

But a pseudo-element on either .a_b or .c can't modify the styles on any element except the element itself - because neither element has any children or any subsequent siblings.

The solution:

In your structure, add .a_b as a subsequent sibling of .a:

<article>
    <div class="a">
    </div>
    <div class="a_b"></div>
    <div class="c"></div>
</article>

and then use CSS positioning to re-position .a_b so that visually, it appears to be inside .a (even though it is actually a sibling element of .a, rather than a child element of .a).

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Thanks, but I need .a_b to be inside .a div. So I did it using js – pindol Dec 24 '16 at 11:08
  • No worries. You can always say "Thanks" with an upvote rather than just writing "Thanks" in the comments. ;-) Appreciated. Happy Christmas! – Rounin Dec 24 '16 at 12:09