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é?
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.
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
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.
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>
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.
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 .
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:
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;
}
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.
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>
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;
}
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>
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>
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>
HTML
<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
CSS
div+div {
display: none;
}
div:hover +div {
display: block;
}