En utilisant uniquement CSS, affichez div on hover sur <a>

Je voudrais montrer un div quand quelqu'un survole un <a>élément, mais je voudrais le faire en CSS et non en JavaScript. Savez-vous comment cela peut être réalisé?

Vous pouvez faire quelque chose comme ça :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

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

Il utilise le sélecteur de frères et sœurs adjacent et constitue la base du menu déroulant du meunier .

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

.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. En utilisant cette méthode lorsque vous survolez l'élément interne, il ne disparaîtra pas. Parce que le .showme est à l'intérieur du .showhim, il ne disparaîtra pas lorsque vous déplacez votre souris entre les deux lignes de texte (ou quoi que ce soit).

Ce sont des exemples de quirqs dont vous devez prendre soin lors de la mise en œuvre d'un tel comportement.

Tout dépend de la raison pour laquelle vous en avez besoin. Cette méthode est meilleure pour un scénario de style de menu, tandis que celle de Yi Jiang est meilleure pour les info-bulles.

J'ai trouvé que l'utilisation de l'opacité est meilleure, elle vous permet d'ajouter des transitions CSS3 pour créer un bel effet de survol fini. Les transitions seront simplement supprimées par les anciens navigateurs IE, de sorte qu'il se dégrade gracieusement en.

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Je suis certainement un expert, mais je suis incroyablement fier de moi d'avoir travaillé sur ce code. Si tu fais:

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) est physiquement en contact le div révélé, vous pouvez déplacer votre souris de l'un à l'autre.

Peut-être que cela n'est pas utile pour beaucoup, mais j'ai dû régler mon div révélé pour qu'il déborde: auto, donc parfois il y avait des barres de défilement, qui ne pouvaient pas être utilisées dès que vous vous éloigniez du div.

En fait, après avoir finalement trouvé comment faire le div révélé, (bien qu'il soit maintenant un enfant du déclencheur, pas un frère), asseyez-vous derrière le déclencheur, en termes de z-index, (avec un peu d'aide de cette page : Comment faire apparaître un élément parent au-dessus de l'enfant ), vous n'avez même pas besoin de survoler le div révélé pour le faire défiler, restez simplement en survolant la gâchette et utilisez votre roue, ou autre chose.

Mon div révélé révèle la majeure partie de la page, donc cette technique la rend beaucoup plus permanente, plutôt que l'écran ne clignote d'un état à l'autre à chaque mouvement de la souris. C'est vraiment intuitif en fait, c'est pourquoi je suis vraiment très fier de moi.

Le seul inconvénient est que vous ne pouvez pas mettre de liens dans le tout, mais vous pouvez utiliser le tout comme un gros lien.

Cette réponse ne nécessite pas que vous connaissiez le type d'affichage (en ligne, etc.) que l'élément masquable est censé être lorsqu'il est affiché:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

Celui-ci utilise le sélecteur frère et le sélecteur non adjacent .

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

Les avantages supplémentaires incluent:

• prise en charge du survol de n'importe quel 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é;
• s'assure que le pop-up apparaît sur les 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 sont:

1. Étant donné que la position de div.popup est définie sur fixed (fonctionnerait également avec absolu), le contenu n'est pas dans le flux normal du document, ce qui permet à l'attribut visible de bien fonctionner.
2. z-index est défini pour garantir que le div.popup apparaît au-dessus des autres éléments de la page.
3. L'information_popup_container est définie sur une petite taille et ne peut donc pas être survolée.
4. Ce code prend uniquement en charge le survol de l'élément div.information. Pour prendre en charge le survol à la fois de div.information et div.popup, reportez-vous à la section Hover Over The 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.

Survolez le pop-up

Comme information supplémentaire. Lorsque la fenêtre contextuelle contient des informations que vous souhaitez peut-être couper et coller ou contient un objet avec lequel vous souhaitez interagir, remplacez d'abord:

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;
}

Et deuxièmement, ajustez la position de div.popup afin qu'il y ait un chevauchement avec div.information. Quelques pixels suffisent pour garantir que le pop-up div puisse recevoir le vol stationnaire lors du déplacement du cusor hors des informations div.

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 contextuel à plusieurs niveaux.

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>

L' +autorisation permet de «sélectionner» uniquement le premier élément non imbriqué, les >éléments sélectionnés uniquement imbriqués - le mieux est d'utiliser ~qui permet de sélectionner l'élément arbitraire qui est l'enfant de l'élément survolé parent. En utilisant l'opacité / largeur et la transition, vous pouvez donner un aspect lisse

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Pour moi, si je veux interagir avec la div cachée sans la voir disparaître à chaque fois que je quitte l'élément déclencheur (a dans ce cas) je dois ajouter:

div:hover {
    display: block;
}

Sur la base de la réponse principale, voici un exemple, utile pour afficher une info-bulle d'information en cliquant sur ?un lien proche:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

D'après mes tests en utilisant ce CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

Et ce HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, il en résulte qu'il se développe en utilisant le second, mais ne se développe pas en utilisant le premier. Donc, s'il y a un div entre la cible de vol stationnaire et le div caché, cela ne fonctionnera pas.

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: survoler sur div afficher le texte dans une autre div

N'oublie pas. si vous essayez de survoler une image, vous devez la placer autour d'un conteneur. css:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Si vous passez la souris dessus:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Cela montrera:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>