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加另一個

回答

相關問題