Question

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

类似的东西：

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

只有'包装'不在'item'内，它在其他地方。

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

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

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

[编辑]

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

Answer 1

您可以采取两种方法，让悬停元素影响（E）另一个元素（F）：

F是E或
F是E的后来兄弟（或兄弟姐妹的后代）元素（其中E出现在 {之前的标记/ DOM 中{1}}）：

说明第一个选项（F作为F的后代/子女）：

E

要演示第二个选项，.item:hover .wrapper { color: #fff; background-color: #000; }是F的兄弟元素：

E

在此示例中，如果.item:hover ~ .wrapper { color: #fff; background-color: #000; }是.wrapper的直接兄弟（两者之间没有其他元素），您也可以使用.item。

JS Fiddle demonstration

参考文献：

CSS 2.1 selectors, at the 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放在这里

＆＃13;

sqldf

＆＃13;

Answer 5

您可以做到。
悬停在.item1上时，它将更改.item2元素。

.item1 {
  size:100%;
}

.item1:hover
{
   .item2 {
     border:none;
   }
}

.item2{
  border: solid 1px blue;
}

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

5 个答案: