Javascript 使用 :hover 修改另一个类的 css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10483323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use :hover to modify the css of another class?
提问by Kesarion
Is there a way to modify the css for one class when hovering on an element from another class using only css ?
仅使用 css 将鼠标悬停在另一个类的元素上时，是否可以修改一个类的 css？
Something like:
就像是：
.item:hover .wrapper { /*some css*/ }
Only 'wrapper' is not inside 'item', it's somewhere else.
只有 'wrapper' 不在 'item' 里面，它在别的地方。
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:
我真的不想将 javascript 用于这么简单的事情，但如果我必须这样做，我该怎么做？这是我失败的尝试：
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.
每个类只有一个元素。不知道为什么他们在制作模板时不使用 ID，但事实就是如此，我无法更改它。
[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.
这是一个菜单。每个菜单元素都有一个不同的类。当您将鼠标悬停在元素上时，右侧会弹出一个子菜单。这就像一个叠加层，当我使用“检查元素”工具时，我可以看到当子菜单处于活动状态时整个网站的 html 都会发生变化（意味着除了子菜单之外什么都没有）。我称之为“包装器”的类具有控制子菜单背景的 css。我真的看不出这两个类之间的联系。
采纳答案by Kesarion
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).
目前在 CSS 中是不可能的，除非您想选择一个子元素或同级元素（在此处的其他答案中对此进行了描述）。
For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.
对于所有其他情况，您将需要 JavaScript。jQuery 和 Angular 等框架可以相对轻松地解决这个问题。
[Edit]
[编辑]
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!
使用新的 CSS (4) 选择器:has()，您将能够定位父元素/类，在不久的将来使仅 CSS 的解决方案可行！
回答by David says reinstate Monica
There are two approaches you can take, to have a hovered element affect (E) another element (F):
您可以采用两种方法，让悬停的元素影响 ( E) 另一个元素 ( F)：
Fis a child-element ofE, orFis a later-sibling (or sibling's descendant) element ofE(in thatEappears in the mark-up/DOM beforeF):
F是 的子元素E，或F是稍后兄弟（或兄弟姐妹的后代）元件E（在E出现在标记上/ DOM前F）：
To illustrate the first of these options (Fas a descendant/child of E):
为了说明这些选项中的第一个（F作为 的后代/孩子E）：
.item:hover .wrapper {
color: #fff;
background-color: #000;
}?
To demonstrate the second option, Fbeing a sibling element of E:
为了演示第二个选项，F作为 的同级元素E：
.item:hover ~ .wrapper {
color: #fff;
background-color: #000;
}?
In this example, if .wrapperwas an immediate sibling of .item(with no other elements between the two) you could also use .item:hover + .wrapper.
在这个例子中，如果.wrapper是.item（两者之间没有其他元素）的直接兄弟，你也可以使用.item:hover + .wrapper.
References:
参考：
回答by Mohammad Gabr
You can do it by making the following CSS. you can put here the css you need to affect child class in case of hover on the root
您可以通过制作以下 CSS 来实现。如果悬停在根上，您可以将影响子类所需的 css 放在这里
.root:hover .child {
}回答by robrich
Provided .wrapper is inside .item, and provided you're either not in IE 6 or .item is an a tag, the CSS you have should work just fine. Do you have evidence to suggest it isn't?
如果 .wrapper 位于 .item 内，并且您不是在 IE 6 中，或者 .item 是一个标签，那么您拥有的 CSS 应该可以正常工作。你有证据表明不是吗？
EDIT:
编辑：
CSS alone can't affect something not contained within it. To make this happen, format your menu like so:
CSS 本身不能影响其中不包含的内容。要做到这一点，请像这样格式化菜单：
<ul class="menu">
<li class="menuitem">
<a href="destination">menu text</a>
<ul class="menu">
<li class="menuitem">
<a href="destination">part of pull-out menu</a>
... etc ...
and your CSS like this:
和你的 CSS 是这样的：
.menu .menu {
display: none;
}
.menu .menuitem:hover .menu {
display: block;
float: left;
// likely need to set top & left
}
回答by TJZ
You can do this.
When hovering to the .item1, it will change the .item2element.
你可以这样做。
当悬停到 时.item1，它会改变.item2元素。
.item1 {
size:100%;
}
.item1:hover
{
.item2 {
border:none;
}
}
.item2{
border: solid 1px blue;
}
