CSS en vol stationnaire montrer un autre élément
je veux utiliser CSS pour afficher div id='b'
quand j'ai passez la souris sur div id='a'
, mais je ne peux pas comprendre comment le faire parce que le div 'a'
est à l'intérieur d'un autre div
div 'b'
n'est pas dans.
<div id='content'>
<div id='a'>
Hover me
</div>
</div>
<div id='b'>
Show me
</div>
35
demandé sur
Deduplicator
2013-09-11 23:05:06
3 réponses
nous ne pouvons montrer l'étiquette de la div sur planant comme ceci
<style>
#b {
display: none;
}
#content:hover~#b{
display: block;
}
</style>
58
répondu
Ankit Agrawal
2013-09-11 19:45:19
c'est en effet possible avec le code suivant
<div href="#" id='a'>
Hover me
</div>
<div id='b'>
Show me
</div>
et le css
#a {
display: block;
}
#a:hover + #b {
display:block;
}
#b {
display:none;
}
maintenant, en glissant sur l'élément #a montre l'élément #B.
18
répondu
Sharath kumar
2016-02-05 11:14:22
Vous pouvez utiliser hache sélecteurs pour cela.
Il y a deux approches:
1. Sélecteur de hache Parent immédiat (<
)
#a:hover < #content + #b
hache la règle de style sélectionnera #b
, qui est la fratrie immédiate de #content
, qui est le parent immédiat de #a
qui a un :hover
état.
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}
#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}
#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}
#a:hover < #content + #b {
display: inline-block;
}
<div id="content">
<div id="a">Hover me</div>
</div>
<div id="b">Show me</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
2. Sélecteur de hache à distance (\
)
#a:hover \ #b
hache la règle de style sélectionnera #b
, qui est présent dans le même document #a
qui a un :hover
état.
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}
#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}
#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}
#a:hover \ #b {
display: inline-block;
}
<div id="content">
<div id="a">Hover me</div>
</div>
<div id="b">Show me</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
7
répondu
Rounin
2017-04-24 13:04:57