1

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

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

4

3 回答 3

1

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

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

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

于 2013-02-22T22:19:14.477 回答
0

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

于 2013-02-22T20:55:45.693 回答
0

这是可能的！有一些技巧：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/

谢谢让我玩:-)

于 2013-02-22T22:52:17.357 回答