En utilisant seulement CSS, montrer div sur le survol de <a>

Question

J'aimerais afficher un div lorsque quelqu'un survole un fichier <a> mais je voudrais le faire en CSS et non en JavaScript. Savez-vous comment y parvenir ?

Answer 1

Vous pouvez faire quelque chose comme este :

div {
    display: none;
}

a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Cela utilise le sélecteur de frères et sœurs adjacents et constitue la base de la menu déroulant pour le poisson suceur .

HTML5 permet aux éléments d'ancrage d'envelopper presque tout, donc dans ce cas, l'élément div peut devenir un enfant de l'ancre. Sinon, le principe est le même - utilisez l'élément :hover pour modifier la pseudo-classe display d'un autre élément.

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Puisque cette réponse est populaire, je pense qu'une petite explication est nécessaire. Avec cette méthode, lorsque vous survolez l'élément interne, il ne disparaît pas. Comme le .showme est à l'intérieur du .showhim, il ne disparaîtra pas lorsque vous déplacerez votre souris entre les deux lignes de texte (ou quoi que ce soit).

Ce sont des exemples de bizarreries dont vous devez tenir compte lorsque vous mettez en œuvre un tel comportement.

Tout dépend de ce dont vous avez besoin. Cette méthode est plus adaptée à un scénario de type menu, tandis que la méthode Yi Jiang est préférable pour les infobulles.

Answer 3

Je ne suis pas du tout un expert, mais je suis incroyablement fier de moi pour avoir trouvé une solution à ce code. Si vous le faites :

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Notez le '>') Vous pouvez contenir le tout dans une balise a, puis, tant que votre déclencheur (qui peut être dans sa propre div, ou directement dans la balise a, ou tout ce que vous voulez) touche physiquement la div révélée, vous pouvez déplacer votre souris de l'une à l'autre.

Cela n'est peut-être pas très utile, mais j'ai dû configurer ma div révélée en overflow : auto, ce qui fait qu'il y avait parfois des barres de défilement, qui ne pouvaient pas être utilisées dès qu'on s'éloignait de la div.

En fait, après avoir finalement trouvé comment faire en sorte que le div révélé (bien qu'il soit maintenant un enfant du déclencheur, et non un frère), se situe derrière le déclencheur, en termes de z-index (avec un peu d'aide de cette page) : Comment faire en sorte qu'un élément parent apparaisse au-dessus de l'enfant ? ) il n'est même pas nécessaire de passer la souris sur la div révélée pour la faire défiler, il suffit de rester au-dessus de la gâchette et d'utiliser la molette, ou autre.

Ma div révélée couvre la majeure partie de la page, et cette technique la rend beaucoup plus permanente, au lieu de faire passer l'écran d'un état à l'autre à chaque mouvement de la souris. C'est très intuitif en fait, c'est pourquoi je suis vraiment très fier de moi.

Le seul inconvénient est qu'il n'est pas possible de placer des liens à l'intérieur de l'ensemble, mais vous pouvez utiliser l'ensemble comme un seul grand lien.

Answer 4

Je voudrais proposer cette solution de modèle à usage général qui développe la solution correcte fournie par Yi Jiang.

Les avantages supplémentaires comprennent :

• prise en charge du survol de tout type d'élément, ou de plusieurs éléments ;
• la fenêtre contextuelle peut être n'importe quel type d'élément ou ensemble d'éléments, y compris des objets ;
• code auto-documenté ;
• fait en sorte que la pop-up apparaisse au-dessus des autres éléments ;
• une base solide à suivre si vous générez du code html à partir d'une base de données.

Dans le html, vous placez la structure suivante :

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

Dans le css vous placez la structure suivante :

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Quelques points à noter :

1. Étant donné que la position de la div.popup est fixe (elle peut également être absolue), le contenu ne se trouve pas dans le flux normal du document, ce qui permet à l'attribut visible de fonctionner correctement.
2. z-index est défini pour garantir que la div.popup apparaisse au-dessus des autres éléments de la page.
3. L'information_popup_container est définie à une petite taille et ne peut donc pas être survolée.
4. Ce code ne prend en charge que le survol de l'élément div.information. Pour prendre en charge le survol des éléments div.information et div.popup, consultez la section survol de la popup ci-dessous.
5. Il a été testé et fonctionne comme prévu dans Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 et Google Chrome 28.0.15.

Passez la souris sur la fenêtre contextuelle

Comme information supplémentaire. Lorsque la fenêtre contextuelle contient des informations que vous pourriez vouloir couper et coller ou contient un objet avec lequel vous pourriez interagir, commencez par le remplacer :

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

avec

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

Ensuite, ajustez la position de div.popup pour qu'il y ait un chevauchement avec div.information. Quelques pixels suffisent pour que la div.popup puisse recevoir le survol lorsque le curseur quitte la div.information.

Cela ne fonctionne pas comme prévu avec Internet Explorer 10.0.9200 et fonctionne comme prévu avec Opera 12.16, Firefox 18.0 et Google Chrome 28.0.15.

Voir violon http://jsfiddle.net/F68Le/ pour un exemple complet avec un menu popup à plusieurs niveaux.

Answer 5

Veuillez tester ce code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>