使用 :hover 修改另一个类的css? [英] Use :hover to modify the css of another class?

问题描述

当只使用 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!

这篇关于使用 :hover 修改另一个类的css?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！