如何在 CSS 中使用悬停同时更改两个元素的属性答案

【问题标题】：How to change properties of two elements at the same time using hover in CSS如何在 CSS 中使用悬停同时更改两个元素的属性
【发布时间】：2013-02-08 14:08:03
【问题描述】：

我需要做到这一点：当我将鼠标悬停在红色框上时，紫色的应该会消失，当我将鼠标悬停在橙色的框上时，蓝色的应该会消失，然后我将鼠标悬停在黄色的框上，绿色的会消失。我设法做到了，但我也需要反过来做，但我尝试的一切都没有奏效。谁能帮帮我？

<html>
<head>
    <title>Boxes</title>
    <style type"text/css">
    div {
        width:70px;
        height:90px;
        border:3px solid #000;
    }
    .t1 {
        background: red;
        top: 50px;
        left: 15px; 
        position: absolute;
    }
    .t1:hover + .t6{
        background: red;
        top: 50px;
        left: 15px; 
        z-index: 1;
        position: absolute;
        visibility: invisible;
    }
    .t2 {
        position: absolute;
        background:orange;
        top: 100px;
        left: 60px;
    }
    .t2:hover + .t5 {
        position: absolute;
        background:orange;
        top: 100px;
        left: 60px;
        z-index: 1;
        visibility: invisible;
    }
    .t3 {
        background:yellow;
        top: 150px;
        left: 110px;
        position: absolute;
    }
    .t3:hover + .t4 {
        background:yellow;
        top: 150px;
        left: 110px;
        position: absolute;
        visibility: invisible;
        z-index: 1;
    }
    .t4 {
        background:green;
        top: 200px;
        left: 160px;
        position: absolute;
    }
    .t5 {
        background:blue;
        top: 250px;
        left: 210px;
        position: absolute;
        z-index: 1;
    }
    .t6 {
        background:purple;
        top: 300px;
        left: 260px;
        position: absolute;
        z-index: 2;
    }


    <!--backwards-->


    </style>
</head>
<body>


    <div class="t1"></div>
    <div class="t6"></div>
    <div class="t2"></div>
    <div class="t5"></div>
    <div class="t3"></div>
    <div class="t4"></div>


</body>

【问题讨论】：

invisible 不是 visibility 的有效选项，您需要 hidden 代替
只有当你可以等待level 4 selectors

标签： css hover

【解决方案1】：

仅靠 CSS 是不可能的。请改用 JavaScript。

【讨论】：

很遗憾，我不被允许。我必须只使用 css 和 html
好吧，CSS 没有选择父元素中其他元素所需的功能，只有当前元素的兄弟元素。
没有。不幸的是没有。 JavaScript 是唯一的方法。

【解决方案2】：

CSS 目前只能以“向下”的方式工作。这意味着您只能从父母到孩子或第一个兄弟姐妹到下一个兄弟姐妹。你不能“向上”——孩子到父母或第二个兄弟姐妹到第一个。

换句话说，您可以使用当前的 HTML 结构执行t1 + t6（在 t1 旁边时选择 t6），但不能在当前 HTML 结构中执行 t6 + t1（在 t6 旁边时选择 t1），因为 t1 来了在t6之前。

遍历 DOM 的唯一方法是使用 JavaScript。

【讨论】：

【解决方案3】：

有可能！有一些技巧：P 只是重新排列一些盒子并玩容器。

最终解决方案：http://jsfiddle.net/vd7km/4/

我只是在玩 CSS，但你可以检查我的工作：http://jsfiddle.net/vd7km/

<div class="cont" id="cont1" >
  <div id="d1" ></div>
  <div id="d2" ></div>
</div>

这是神奇的代码：

.cont div:first-child:hover + div {
    visibility: hidden;
}

.cont:hover div:first-child {
    visibility: hidden;
}
.cont:hover div:first-child:hover {
    visibility: visible !important;
}

更新！：http://jsfiddle.net/vd7km/2/

还有两个和代码重构。

快完成了：http://jsfiddle.net/vd7km/3/

完成：http://jsfiddle.net/vd7km/4/

感谢让我玩 :-)

【讨论】：

谢谢！ :) 我试图用嵌套来做，但总是会弄乱顺序......
谢谢你。我喜欢被认可:-)