CSS悬停一格效果，div加另一个

我已经阅读了关于这个问题的近15个问题，但没有找到一个可以帮助我想要的东西。CSS悬停一格效果，div加另一个

比方说，我有5个div以金字塔的方式堆叠，中间的一个在顶部，而两个在底部。

我想要的是，如果你把鼠标悬停在div1或div5上，那两者都会成为前景。然后，如果您将鼠标悬停在div2或div4上，那么他们两个将会出现在前景中。我尝试了很多东西，但通常如果你将鼠标悬停在一个以上，另一个出现，但不是两者都有。或者我现在拥有的是将鼠标悬停在父级div上的方式，但是当我将鼠标悬停在某个div上时，没有任何反应。

这是我现在的代码。

#stack1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 
#boks3, 
 
#boks1, 
 
#boks2, 
 
#boks4, 
 
#boks5 { 
 
    background-color: #ff3333; 
 
    width: 32%; 
 
    position: absolute; 
 
    margin-left: 33.5%; 
 
    z-index: 3; 
 
    height: 300px; 
 
    text-align: left; 
 
    overflow: hidden; 
 
} 
 
#boks1 { 
 
    background-color: #ff6666; 
 
    margin-left: 2%; 
 
    z-index: 1; 
 
    height: 300px; 
 
} 
 
#boks2 { 
 
    background-color: #ff4d4d; 
 
    margin-left: 17%; 
 
    z-index: 2; 
 
    height: 300px; 
 
} 
 
#boks5 { 
 
    background-color: #ff0000; 
 
    margin-left: 65%; 
 
    z-index: 1; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#boks4 { 
 
    background-color: #ff1a1a; 
 
    margin-left: 50%; 
 
    z-index: 2; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#stack1:hover + #boks1, 
 
#stack1:hover ~ #boks5 { 
 
    background-color: yellow; 
 
    z-index: 4; 
 
}

<div id="boks3"> 
 

 
</div> 
 

 
<div id="stack1"></div> 
 
<div id="boks1"> 
 

 
</div> 
 
<div id="boks5"> 
 

 
</div> 
 

 

 
<div id="stack2"> 
 
    <div id="boks2"> 
 

 
    </div> 
 
    <div id="boks4"> 
 

 
    </div> 
 
</div>

我真的想这样做的CSS，看到我在角2框架使用它，不希望将jQuery添加到角2框架。

亲切的问候

来源

2017-01-30 Alfa Bravo

哪里是你的DIV1和DIV5在这个例子吗？我看到的只有一个boks-div？ – cloned

CSS只能选择向右和向下，但不能向左或向上。所以悬停在f.e.你的'boks5'永远不会对'boks1'产生任何影响。并不是说这完全不可能_（取决于具体情况以及结构可能如何改变;你说的是关于“金字塔”的东西，但是你的例子似乎没有反映出这一点） - 但我认为用JS你会更容易实现。 – CBroe

您是否尝试过使用类？ – DomeTune

我认为你需要用boks1和boks5到stack1以及boks2和boks4到stack2。当您将鼠标悬停在boks es堆栈上时：悬停事件将启动。

#stack1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 
#boks3, 
 
#boks1, 
 
#boks2, 
 
#boks4, 
 
#boks5 { 
 
    background-color: #ff3333; 
 
    width: 32%; 
 
    position: absolute; 
 
    margin-left: 33.5%; 
 
    z-index: 3; 
 
    height: 300px; 
 
    text-align: left; 
 
    overflow: hidden; 
 
} 
 
#boks1 { 
 
    background-color: #ff6666; 
 
    margin-left: 2%; 
 
    z-index: 1; 
 
    height: 300px; 
 
} 
 
#boks2 { 
 
    background-color: #ff4d4d; 
 
    margin-left: 17%; 
 
    z-index: 2; 
 
    height: 300px; 
 
} 
 
#boks5 { 
 
    background-color: #ff0000; 
 
    margin-left: 65%; 
 
    z-index: 1; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#boks4 { 
 
    background-color: #ff1a1a; 
 
    margin-left: 50%; 
 
    z-index: 2; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#stack1:hover #boks1, 
 
#stack1:hover #boks5 { 
 
    background-color: yellow; 
 
    z-index: 4; 
 
} 
 
#stack2:hover #boks2, 
 
#stack2:hover #boks4 { 
 
    background-color: green; 
 
    z-index: 4; 
 
}

<div id="boks3"> 
 
</div> 
 

 
<div id="stack1"> 
 
<div id="boks1"> 
 
</div> 
 
<div id="boks5"> 
 
</div> 
 
</div> 
 

 
<div id="stack2"> 
 
    <div id="boks2"> 
 
    </div> 
 
    <div id="boks4"> 
 
    </div> 
 
</div>

来源

2017-01-30 14:27:52 Banzay

嗨Banzay，那正是什么我想了！非常感谢！ –

CSS悬停一格效果，div加另一个

回答

相关问题