使用 :hover 修改另一个类的css?
当只使用 css 将鼠标悬停在另一个类的元素上时，有没有办法修改一个类的 css ?
Is there a way to modify the css for one class when hovering on an element from another class using only css ?
类似:
.item:hover .wrapper { /*some css*/ }
只有 'wrapper' 不在 'item' 内，它在其他地方.
Only 'wrapper' is not inside 'item', it's somewhere else.
我真的不想在这么简单的事情上使用 javascript，但如果我必须这样做，我该怎么做?这是我失败的尝试:
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')";";
每个类只有一个元素.不知道为什么他们在制作模板时不使用 ID，但就是这样，我无法更改.
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.
这是一个菜单.每个菜单元素都有一个不同的类.当您将鼠标悬停在元素上时，右侧会弹出一个子菜单.这就像一个叠加层，当我使用检查元素"工具时，我可以看到当子菜单处于活动状态时整个网站的 html 都发生了变化(这意味着除了子菜单什么都没有).我称之为包装器"的类具有控制子菜单背景的 css.我真的看不出这两个类之间有什么联系.
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.
推荐答案
目前在 CSS 中是不可能的，除非你想选择一个子元素或兄弟元素(微不足道，在此处的其他答案中有描述).
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).
对于所有其他情况，您将需要 JavaScript.jQuery 和 Angular 等框架可以相对轻松地解决这个问题.
For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.
使用新的 CSS (4) 选择器 :has()，您可以将能够定位父元素/类，在不久的将来使纯 CSS 解决方案可行！
With the new CSS (4) selector :has(), you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!
相关文章