In CSS, è possibile che quando eseguo il rollover di un elemento, renda visibile un altro elemento? Ho un'icona, e quando qualcuno ci mette sopra, voglio che renda visibile un elemento di testo che descrive cosa fa l'icona.CSS: rollover di un elemento e rende visibile un altro elemento
Ecco un tooltip CSS che uso sempre :) Funziona alla grande, anche in 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>
Spero che sia d'aiuto.
sicuro che lo è!
.me:hover span { display: block; }
Se si desidera mostrare un elemento che non è un figlio dell'elemento aleggiava potrebbe essere necessario usare javascript
d'accordo con la raccomandazione JavaScript. In particolare jQuery è facile e più appropriato per la logica del comportamento della pagina. Penso che i CSS dovrebbero essere solo look/feel/style ... Javascript dovrebbe essere il tuo evento e la logica del tuo comportamento.
È possibile effettuare bambini-elementi visibili in bilico sul genitore (come Hunter suggests), o fratelli:
span:hover + span {display: block; }
ci sono forse alcuni lievi problemi di compatibilità cross-browser, ma con un doctype valida credo IE7 + va bene con i selettori di pari livello (anche se non ho provato a testare quella teoria).
Ecco un piccolo esempio schiaffeggiato-insieme che non funziona su 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>
Ma si dovrebbe davvero basta usare jQuery.
ecco il violino http://jsfiddle.net/c0owz9qb/ – suhailvs