Question

我需要实现这个目标：当我在红色的盒子上盘旋时，紫色的盒子应该消失，当我将鼠标悬停在橙色的盒子上时，蓝色的那个应该消失，然后我将它们翻过黄色的那个，绿色的那个消失了。我设法做到了，但我也需要反过来，但我尝试的一切都没有用。有谁可以帮助我？

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

Answer 1

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

换句话说，您可以执行t1 + t6（在t1旁边选择t6），但是当前的HTML结构不能执行t6 + t1（在t6旁边选择t1），因为t1在t6之前出现。

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

Answer 2

单独使用CSS是不可能的。请改用JavaScript。

Answer 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/

感谢让我玩： - ）

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

3 个答案: