0

I know how to change style of an element on hover but i want to change style of another element when first element is focused or hovered.

viaAhmed
  • 13
  • 3
  • 3
    it all depends on your hierarchy. Please include some of your markup and narrow down the issue for us to better help you. Also review this for good measure: https://www.w3schools.com/cssref/css_selectors.asp – soulshined Feb 13 '19 at 14:15
  • 1
    The adjacent selectors might be of use here, if the elements are next to each other. Documentation on these: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator – Peter Dempsey Feb 13 '19 at 14:16
  • my question was a bit different and however I got the answer :) . – viaAhmed Feb 16 '19 at 11:18

1 Answers1

0

This is purely dependent on your HTML structure.

If your affected element is a child of the trigger element, then you can use the pattern

.[TRIGGER_PARENT_CLASS]:hover .[AFFECTED_CHILD_CLASS]

This pattern can nest as deep as you would like. It is also worth noting that you may want to use the Child combinator to select a direct child element.

If your affected element is a sibling of your trigger element, and the trigger element is directly preceding the affected element you can use pattern:

.[TRIGGER_CLASS]:hover ~ .[AFFECTED_SIBLING_CLASS]

You can learn more about Child and Sibling Selectors in this CSS-Tricks article

Maneesh
  • 378
  • 1
  • 10