CSS - 懸停時，顯示「內測」

這裏是我的代碼：CSS - 懸停時，顯示「內測」

<div class="hoverDiv">Hover</div> 
<div> 
    <div class="hoverDivShow"></div> 
</div> 



.hoverDivShow { 
    display: none; 
} 
.hoverDiv:hover ~ .hoverDivShow { 
    display: block; 
}

我一直在努力做的，就是讓hoverDivShow當hoverDiv懸停出現。

HTML將無法更改。

我在其他地方看過，並一直無法找到任何解決方案。不知道我在做什麼對/錯。幫助會很好。

謝謝！

來源

2015-11-13 polyps

是'.hoverDivShow'應該在第二個div裏面嗎？ – cocoa

是的，它應該在那裏。我的錯。就像我在實際的代碼中那樣。 – polyps

它適用於我...你想添加文本到'.hoverDivShow'嗎？ –

您需要使用.hoverDiv:hover ~ div .hoverDivShow作爲「侄女」選擇器。這個想法是選擇一個<div>，這是.hoverDiv的兄弟姐妹，然後選擇具有類別hoverDivShow的兄弟姐妹的孩子。

這裏的工作演示：

.hoverDivShow { 
 
    display: none; 
 
} 
 
.hoverDiv:hover ~ div .hoverDivShow { 
 
    display: block; 
 
}

<div class="hoverDiv">Hover</div> 
 
<div> 
 
    <div class="hoverDivShow">I'm hidden until you hover!</div> 
 
</div>

來源

2015-11-13 19:10:03

謝謝，這正是我一直在尋找的！ – polyps

你的第二個CSS規則.hoverDiv:hover ~ .hoverDivShow { display: block }使用一般兄弟選擇。您正在搜索所有元素跟隨.hoverDiv在相同的DOM級別與hoverDivShow類。如果您查看您的結構，您會注意到這些元素不存在。

As pointed out by Ed Cottrell，確實存在與具有該類的孩子同胞的兄弟姐妹。因此，使用一般的兄弟選擇器，您需要定位該兄弟的子對象.hoverDiv:hover ~ div .hoverDivShow { [...] }

I made a fiddle for you非常直觀地解釋了一般兄弟選擇器的定位結構。

你的情況，你也可以使用相鄰兄弟選擇這樣的：

.hoverDiv:hover + div .hoverDivShow { [...] }

不同的是，它只會瞄準的第一個元素直接跟你在同一個DOM級別第一選擇，如果它符合您的第二選擇器。看看我的小提琴和w3schools上的this explanation。

來源

2015-11-13 23:14:23 Marian

CSS - 懸停時，顯示「內測」

回答

相關問題