web-dev-qa-db-fra.com

En utilisant uniquement les CSS, affichez div en survolant <a>

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

253
tetris

Vous pouvez faire quelque chose comme this :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Ceci utilise le sélecteur frère adjacent , et constitue la base du menu déroulant suckerfish

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

451
Yi Jiang

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}
<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Comme cette réponse est populaire, je pense qu’une petite explication est nécessaire. En utilisant cette méthode lorsque vous passez la souris sur l'élément interne, il ne disparaîtra pas . Parce que le .showme est dans .showhim, il ne disparaît pas lorsque vous déplacez votre souris entre les deux lignes de texte (ou quoi que ce soit). 

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

Tout dépend de ce dont vous avez besoin. Cette méthode est préférable pour un scénario de style de menu, alors que Yi Jiang 'est préférable pour les info-bulles.

191
n00b

Je trouve que mieux vaut utiliser l'opacité, cela vous permet d'ajouter css3 transitions pour créer un bel effet de survol bien fini. Les transitions étant simplement abandonnées par les anciens navigateurs IE, elles se dégradent progressivement.

#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>

31
Timothy

Je suis un expert, je sais, mais je suis incroyablement fier de moi pour avoir mis au point quelque chose à propos de ce code. Si tu fais:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Notez le '>') Vous pouvez contenir le tout dans une balise, tant que votre déclencheur (qui peut être dans sa propre division, ou directement dans la balise, ou tout ce que vous voulez) est physiquement touchant 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 je devais régler mon div révélé sur débordement: auto, alors il y avait parfois des barres de défilement, qui ne pouvaient pas être utilisées dès que vous vous éloigniez de la div.

En fait, après avoir enfin trouvé comment transformer la div révélée (bien que ce soit maintenant un enfant du déclencheur, pas un frère ou une soeur), restez 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 child ) vous n'avez même pas besoin de survoler la div révélée pour le faire défiler, restez en survol sur la gâchette et utilisez votre roue, ou autre chose.

Mon div révélée couvre la plus grande partie de la page. Cette technique la rend donc beaucoup plus permanente, au lieu de faire clignoter l'écran d'un état à un autre à chaque mouvement de la souris. C'est vraiment intuitif, donc je suis vraiment fier de moi.

Le seul inconvénient est que vous ne pouvez pas insérer de liens dans l'ensemble, mais que vous pouvez utiliser le tout comme un seul et même gros lien.

24
Edd Tillen

Cette réponse n'exige pas que vous sachiez quel type d'affichage (en ligne, etc.) l'élément cachable 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>

Ceci utilise le sélecteur frère adjacent et le sélecteur pas

13
nascosto

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

Les avantages supplémentaires incluent:

  • prise en charge du survol de tout type d'élément ou de plusieurs éléments;
  • la popup peut être n’importe quel type d’élément ou ensemble d’éléments, y compris des objets;
  • code auto-documenté;
  • veille à ce que la fenêtre contextuelle 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 code 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 fixe (fonctionnerait également en absolu), le contenu ne se trouve pas dans le flux normal du document, ce qui permet à l'attribut visible de bien fonctionner.
  2. z-index est défini pour que le div.popup apparaisse au-dessus des autres éléments de la page.
  3. Le conteneur information_popup_container est défini sur une petite taille et ne peut donc pas être survolé.
  4. Ce code ne prend en charge que le survol de l'élément div.information. Pour prendre en charge le survol de div.information et de div.popup, reportez-vous à la section Survolez la fenêtre 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 Popup

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 voudrez peut-être 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 que le div.popup puisse recevoir le survol lors du déplacement du curseur sur 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 fiddle http://jsfiddle.net/F68Le/ pour un exemple complet avec un menu contextuel à plusieurs niveaux.

13
Tai Paul

s'il vous plaît 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>
4
Mehdi Raash

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 (un dans ce cas), je dois ajouter:

div:hover {
    display: block;
}
2
hachpai

Basé sur la réponse principale, il s'agit d'un exemple utile pour afficher une info-bulle d'information lorsque vous cliquez sur un ? à proximité d'un lien:

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>

1
Basj

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 survolez ceci:

<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>
0
Lesly Revenge

Le + n'autorise que 'le premier élément non imbriqué, le > ne sélectionne que les éléments imbriqués - il est préférable d'utiliser ~ qui permet de sélectionner un élément arbitraire qui est l'enfant d'un élément survolé par le 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 </div>

<div class='bbb'>B
  <div class='ccc'>C
    <div class='ddd'>D</div>
  </div>
</div>

<div class='eee'>E
  <div class='fff'>F
    <div class='ggg'>G</div>
    <div class='hhh'>H</div>
  </div>
</div>
0

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: survolez div afficher le texte dans un autre div

0
Kondal