55

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

就像是：

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

只有“包装器”不在“项目”内，它在其他地方。

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

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

每个类只有一个元素。不知道为什么他们在制作模板时不使用 ID，但事实就是如此，我无法更改它。

[编辑]

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

4

5 回答 5

111

您可以采用两种方法，让悬停的元素影响 ( E) 另一个元素 ( F)：

  1. F是 的子元素E，或
  2. F是E（E出现在标记/DOM before 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 小提琴演示。

参考：

于 2012-05-07T14:30:39.247 回答
11

目前在 CSS 中是不可能的，除非你想选择一个子元素或兄弟元素（微不足道，并在此处的其他答案中描述）。

对于所有其他情况，您将需要 JavaScript。jQuery 和 Angular 等框架可以相对轻松地解决这个问题。

[编辑]

使用新的 CSS (4) 选择器:has()，您将能够定位父元素/类，从而在不久的将来使纯 CSS 解决方案可行！

于 2012-06-12T12:40:34.497 回答
9

您可以通过制作以下 CSS 来做到这一点。你可以把你需要影响子类的css放在这里，以防悬停在根目录上

.root:hover    .child {
   
}

于 2016-03-12T10:22:18.007 回答
6

如果 .wrapper 在 .item 中，并且如果您不在 IE 6 中或 .item 是 a 标签，那么您拥有的 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
}
于 2012-05-07T14:17:06.557 回答
0

你可以这样做。
当悬停到 时.item1，它将改变.item2元素。

.item1 {
  size:100%;
}

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

.item2{
  border: solid 1px blue;
}
于 2020-04-06T13:10:25.157 回答