是什么原因造成的，我该如何解决？

Question

因此，在这里我将变得非常简单和容易，但是某些方法不起作用，我也不知道为什么以及如何进行更改。

我正在尝试创建一个可以在div字段中点亮很多div的暗场

所以我有9个像这样的Div：

-----------------

#Div1 #Div2 #Div3
#Div4 #Div5 #Div6
#Div7 #Div8 #Div9

-----------------

当我将鼠标悬停在#Div1

上时

使#Div2和#Div4 = 75% visible

#Div3，#Div5和#Div7 = 50% visible。

，最后是#Div6和#Div8 = 25% visible。

从#Div 9看不到

#Div1

问题是当我尝试将鼠标悬停在#Div2上时。

将应用相同的模式，但是#Div1未显示。

是什么原因造成的，我该如何解决？

预先感谢：）

这是CSS的外观：

#container { width: 250px;}
#container div {margin: 1px;}

#puzzelpiece1   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece2   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece3   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece4   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece5   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece6   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece7   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece8   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece9   { width: 80px; height: 80px; background-color: black; float: left; }



#puzzelpiece1:hover { background-color: rgb(0,0,0,0); }
#puzzelpiece1:hover ~ #puzzelpiece2 { background-color: rgb(0,0,0,0.25); }
#puzzelpiece1:hover ~ #puzzelpiece3 { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1:hover ~ #puzzelpiece4 { background-color: rgb(0,0,0,0.25); }
#puzzelpiece1:hover ~ #puzzelpiece5 { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1:hover ~ #puzzelpiece6 { background-color: rgb(0,0,0,0.75); }
#puzzelpiece1:hover ~ #puzzelpiece7 { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1:hover ~ #puzzelpiece8 { background-color: rgb(0,0,0,0.75); }

<div id='container'>
  <div id="puzzelpiece1"></div>
  <div id="puzzelpiece2"></div>
  <div id="puzzelpiece3"></div>
  <div id="puzzelpiece4"></div>
  <div id="puzzelpiece5"></div>
  <div id="puzzelpiece6"></div>
  <div id="puzzelpiece7"></div>
  <div id="puzzelpiece8"></div>
  <div id="puzzelpiece9"></div>
</div>

Answer 1

查看the documentation for ~。它是后继同级组合器。

后续同级组合器由分隔两个简单选择器序列的“波浪号”（U + 007E，〜）字符组成。这两个序列所表示的元素在文档树中共享相同的父对象，而第一个序列所表示的元素在之前（不一定是紧随其后）在第二个所表示的元素之前。

#Div2不在#Div1之前。

CSS没有机制可以根据后续元素的状态来设置元素的样式。

您需要为此使用JavaScript。

例如使用mouseover事件将一个类添加到包含div的元素中。

Answer 2

您不能向后移动，但是可以向前移动并像这样在嵌套级别上使用nth-child。请记住，您绝对应该结合一些CSS属性以实现可维护性。为了简化构建，我只是复制粘贴了它们。

编辑：是的，我为这个解决方案感到ham愧，并且永远不会使用它，实际上应该用一些简单的JS解决这个问题，但这表明它仅在CSS中是可能的。

.wrap { max-width: 240px; }

#puzzelpiece1   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece2   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece3   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece4   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece5   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece6   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece7   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece8   { width: 80px; height: 80px; background-color: black; float: left; }
#puzzelpiece9   { width: 80px; height: 80px; background-color: black; float: left; }

#puzzelpiece1-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece2-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece3-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece4-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece5-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece6-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece7-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece8-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }
#puzzelpiece9-overlay   { width: 80px; height: 80px; background-color: transparent; float: left; }


#puzzelpiece1-overlay:hover ~ #visual div:nth-child(1) { background-color: rgb(0,0,0,0); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(2) { background-color: rgb(0,0,0,0.25); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(3) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(4) { background-color: rgb(0,0,0,0.25); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(5) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(6) { background-color: rgb(0,0,0,0.75); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(7) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece1-overlay:hover ~ #visual div:nth-child(8) { background-color: rgb(0,0,0,0.75); }

#puzzelpiece2-overlay:hover ~ #visual div:nth-child(1) { background-color: rgb(0,0,0,0.25); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(2) { background-color: rgb(0,0,0,0.0); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(3) { background-color: rgb(0,0,0,0.25); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(4) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(5) { background-color: rgb(0,0,0,0.25); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(6) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(7) { background-color: rgb(0,0,0,0.75); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(8) { background-color: rgb(0,0,0,0.50); }
#puzzelpiece2-overlay:hover ~ #visual div:nth-child(9) { background-color: rgb(0,0,0,0.75); }

#stage {
    position: relative;
}

#visual {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

<div class="wrap">
    <div id="stage">
        <div id="puzzelpiece1-overlay"></div>
        <div id="puzzelpiece2-overlay"></div>
        <div id="puzzelpiece3-overlay"></div>
        <div id="puzzelpiece4-overlay"></div>
        <div id="puzzelpiece5-overlay"></div>
        <div id="puzzelpiece6-overlay"></div>
        <div id="puzzelpiece7-overlay"></div>
        <div id="puzzelpiece8-overlay"></div>
        <div id="puzzelpiece9-overlay"></div>

        <div id="visual">
            <div id="puzzelpiece1"></div>
            <div id="puzzelpiece2"></div>
            <div id="puzzelpiece3"></div>
            <div id="puzzelpiece4"></div>
            <div id="puzzelpiece5"></div>
            <div id="puzzelpiece6"></div>
            <div id="puzzelpiece7"></div>
            <div id="puzzelpiece8"></div>
            <div id="puzzelpiece9"></div>
        </div>
    </div>
</div>

负CSS悬停链接

是什么原因造成的，我该如何解决？

2 个答案: