使用:悬停修改另一个类的CSS？

Question

有没有办法在仅使用css将鼠标悬停在另一个类的元素上时修改一个类的css？

就像是:

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

只有'包装'不在'项目'内,它在其他地方.

我真的不想使用javascript这么简单,但如果必须,我该怎么做？这是我失败的尝试:

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

每个班级只有一个元素.不知道为什么他们在制作模板时没有使用ID,但这就是它的原因,我无法改变它.

[编辑]

这是一个菜单.每个菜单元素都有一个独特的类.当您将鼠标悬停在元素上时,子菜单会弹出到右侧.它就像一个叠加层,当我使用'Inspect Element'工具时,我可以看到整个网站html在子菜单处于活动状态时发生变化(意味着除了子菜单之外什么都没有).我称之为"包装器"的类具有控制子菜单背景的css.在这两个类之间我真的没有任何联系.

Answer 1

你可以采取两种方法,让一个悬停元素影响(E)另一个元素(F):

1. F是E,或的儿童元素
2. F是稍后兄弟(或兄弟姐妹的后代)的元件E(在E出现在标记上/ DOM 前 F):

为了说明这些选项中的第一个(F作为后代/孩子E):

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}?

为了演示第二个选项,F作为兄弟元素E:

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}?

在这个例子中,如果.wrapper是一个直接的兄弟.item(两者之间没有其他元素)你也可以使用.item:hover + .wrapper.

JS小提琴示范.

参考文献:

• CSS 2.1选择器,在W3.org上.

Answer 2

目前在CSS中是不可能的,除非你想选择一个子元素或兄弟元素(这里有其他答案中描述的琐碎).

对于所有其他情况,您将需要JavaScript.像Angular这样的jQuery和框架可以相对轻松地解决这个问题.

[编辑]

使用新的CSS(4)选择器:has(),您将能够定位父元素/类,使CSS-Only解决方案在不久的将来可行!

Answer 3

提供.wrapper在.item中,并且如果你不是在IE 6中或者.item是一个标签,你拥有的CSS应该可以正常工作.你有证据表明它不是吗？

编辑:

仅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 ...

和你的CSS一样:

.menu .menu {
    display: none;
}

.menu .menuitem:hover .menu {
    display: block;
    float: left;
    // likely need to set top & left
}

Answer 4

您可以通过编写以下CSS来实现。如果将鼠标悬停在根上，则可以将需要影响子类的css放在此处

.root:hover    .child {
   
}