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 divdiv '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