Come creare una finestra quando si passa il mouse sul testo in puro CSS?

Ho provato molte volte a farlo, ma non ha ancora funzionato.Come creare una finestra quando si passa il mouse sul testo in puro CSS?

Quando ho mouse su questo testo

enter image description here

Poi mi deve mostrare la casella

enter image description here

voglio ottenere questo effetto puramente con i CSS, se qualcuno può fare questo.

fonte

2012-04-20 Rohit Azad

Forse potresti essere interessato a questa risposta: http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471 –

Si può scrivere in questo modo:

CSS

span{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: 30px; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    top: -80px; 
    left:-30px; 
    display:none; 
    padding:0 20px; 

} 
span:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #dfdfdf; 
    border-right:5px solid #dfdfdf; 
    background:#f8f8f8; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 
p{ 
    margin:100px; 
    float:left; 
    position:relative; 
    cursor:pointer; 
} 

p:hover span{ 
    display:block; 
}

HTML

<p>Hover here<span>some text here ?</span></p>

Scegli questa http://jsfiddle.net/UNs9J/1/

fonte

2012-04-20 09:33:27 sandeep

woah, è carino :) Sai qual è la compatibilità? Posso vedere che i rotanti (la 'freccia') probabilmente non funzioneranno in IE/opera, ma altri limiti? – Nanne

ruota il lavoro in opera e per IE puoi usare il filtro IE http://www.boogdesign.com/b2evo/index.php/element-rotation-ie-matrix-filter?blog=2 – sandeep

Si può anche farlo e commutazione tra display: block al passaggio del mouse e display: none senza hover per produrre l'effetto.

fonte

2012-04-20 09:29:57 Ankit

Si può facilmente fare questo CSS Tool Tip tramite il codice semplice: -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
a.info{ 
    position:relative; /*this is the key*/ 
    color:#000; 
    top:100px; 
    left:50px; 
    text-decoration:none; 
    text-align:center; 
    } 



a.info span{display: none} 

a.info:hover span{ /*the span will display just on :hover state*/ 
    display:block; 
    position:absolute; 
    top:-60px; 
    width:15em; 
    border:5px solid #0cf; 
    background-color:#cff; color:#000; 
    text-align: center; 
    padding:10px; 
    } 

    a.info:hover span:after{ /*the span will display just on :hover state*/ 
    content:''; 
    position:absolute; 
    bottom:-11px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #0cf; 
    border-right:5px solid #0cf; 
    background:#cff; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
    } 


</style> 
</head> 
<body> 
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a> 
    </div> 
</body> 
</html>

http://jsbin.com/ebucoz/25/edit

fonte

2012-04-20 09:44:25

Questo è un piccolo ritocco sulle altre risposte. Se hai div nidificati puoi includere contenuti più eccitanti come H1 nel tuo popup.

CSS

div.appear { 
    width: 250px; 
    border: #000 2px solid; 
    background:#F8F8F8; 
    position: relative; 
    top: 5px; 
    left:15px; 
    display:none; 
    padding: 0 20px 20px 20px; 
    z-index: 1000000; 
} 
div.hover { 
    cursor:pointer; 
    width: 5px; 
} 
div.hover:hover div.appear { 
    display:block; 
}

HTML

<div class="hover"> 
<img src="questionmark.png"/> 
    <div class="appear"> 
     <h1>My popup</h1>Hitherto and whenceforth. 
    </div> 
</div>

Il problema con queste soluzioni è che tutto dopo questo nella pagina viene spostata quando viene visualizzato il pop-up, vale a dire, il resto della pagina salti verso il basso "creare spazio". L'unico modo per risolvere il problema era posizionare: assoluto e rimuovere i tag CSS in alto e a sinistra.

fonte

2013-09-05 15:20:15 Chris

Esattamente quello che hanno detto, funzionerà.

Nell'elemento padre è possibile impostare un altezza massima.

Sto prendendo sandeep esempio e aggiungendo l'altezza massima e, se necessario, è possibile aggiungere proprietà di larghezza massima. Il testo rimarrà dove dovrebbe stare (se possibile, in alcuni casi sarà necessario modificare alcuni valori per farlo rimanere in là)

span{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: 30px; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    top: -80px; 
    left:-30px; 
    display:none; 
    padding:0 20px; 
} 

span:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #dfdfdf; 
    border-right:5px solid #dfdfdf; 
    background:#f8f8f8; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 

p{ 
    margin:100px; 
    float:left; 
    position:relative; 
    cursor:pointer; 
    max-height: 10px; 
} 

p:hover span{ 
    display:block; 
}

max-height nel p comma, secondo a ultimo, ultima riga.

Testarlo prima di considerarlo inutile.

fonte

2015-07-19 22:25:36

Come questo aggiunge qualcosa risposte esistenti? – cimmanon

Aggiunte le proprietà max-height e max-width, nulla viene spostato quando il cursore si trova sul testo e la casella viene mostrata. –

Come creare una finestra quando si passa il mouse sul testo in puro CSS?

risposta

Problemi correlati