Home/ Questions/Q 8071275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:39:36+00:00

Is there a way to modify the css for one class when hovering on

  • 0

Is there a way to modify the css for one class when hovering on an element from another class using only css ?

Something like:

.item:hover .wrapper { /*some css*/ }

Only ‘wrapper’ is not inside ‘item’, it’s somewhere else.

I really don’t want to use javascript for something this simple, but if I have to, how would I do it ? Here’s my failed attempt:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";

There’s only one element of each class. Don’t know why they didn’t use IDs when they made the template, but that’s just how it is and I can’t change it.

[Edit]

It’s a menu. Each menu element has a distinct class. When you hover on the element a submenu pops up to the right. It’s like an overlay, when I use the ‘Inspect Element’ tool I can see that the whole website html changes when the submenu is active(meaning there’s nothing but the submenu). The class I call ‘wrapper’ has the css that controls the background for the submenu. There’s really no connection that I can see between the two classes.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

    For all other cases you’ll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

    [Edit]

    With the new CSS (4) selector :has() guide from CSS4.Rocks (archived by Wayback Machine) and :has() guide from MDN Web Docs, you’ll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

    • 0