En CSS, est-il possible que lorsque je retourne un élément, je rende visible un autre élément? J'ai une icône, et quand quelqu'un la survole, je veux qu'elle rende visible un élément de texte qui décrit ce que fait l'icône.CSS - Survoler un élément et rendre visible un autre élément
Voici une infobulle CSS que j'utilise tout le temps :) Fonctionne très bien, même dans IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Espérons que ça aide.
bien sûr!
.me:hover span { display: block; }
Si vous voulez montrer un élément qui est pas un enfant de l'élément plané vous pourriez avoir besoin d'utiliser javascript
D'accord avec la recommandation JavaScript. Plus précisément, jQuery est facile et le plus approprié pour la logique de comportement de la page. Je pense que CSS devrait seulement être look/feel/style ... Javascript devrait être tout votre logique d'événement et de comportement.
Vous pouvez faire enfant-éléments visibles en plaçant le curseur sur le parent (comme Hunter suggests), ou frères et soeurs:
span:hover + span {display: block; }
Il y a peut-être quelques petits problèmes de compatibilité entre les navigateurs, mais avec un doctype valide je pense IE7 + est d'accord avec les sélecteurs de frères et sœurs (même si je n'ai pas essayé de tester cette théorie).
Voici un petit exemple giflé-ensemble qui ne fonctionnera pas sur IE ...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
Mais vous devriez vraiment juste utiliser jQuery.
voici le violon http://jsfiddle.net/c0owz9qb/ – suhailvs