Ich habe viele Male versucht, dies zu tun, aber es hat noch nicht geklappt.Wie erstellt man eine Box, wenn man in reinem CSS über den Text fährt?
Wenn ich die Maus über diesen Text
Dann muss es zeigt mir diese Box
ich diesen Effekt rein mit CSS erreichen will, wenn jemand dies tun kann.
Sie können wie folgt schreiben:
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>
prüfen diese http://jsfiddle.net/UNs9J/1/
woah, das ist nett :) Weißt du, was die Kompatibilität ist? Ich kann sehen, dass die rotiert (der 'Pfeil') wird wahrscheinlich nicht in IE/Opera, aber andere Grenzen? – Nanne
rotieren Arbeit in der Oper & für IE können Sie IE Filter http://www.boogdesign.com/b2evo/index.php/element-rotation-ie-matrix-filter?blog=2 – sandeep
Sie können es auch tun, indem sie zwischen Display Makeln: Block auf schweben und display: none ohne schweben um den Effekt zu erzeugen.
Sie können ganz einfach das machen CSS Tool Tip durch einfachen Code: -
<!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>
Dies ist ein kleines zwicken auf den anderen Antworten. Wenn Sie verschachtelte Divs haben, können Sie aufregendere Inhalte wie H1s in Ihr Popup einfügen.
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>
Das Problem mit diesen Lösungen ist, dass auf der Seite danach alles verschoben wird, wenn die Popup-Fenster angezeigt wird, das heißt, der Rest der Seite springt nach unten "Raum schaffen". Die einzige Möglichkeit, dies zu beheben, bestand darin, position: absolute zu machen und die oberen und linken CSS-Tags zu entfernen.
Genau was sie sagten, es wird funktionieren.
Im Elternelement eine maximale Höhe festlegen.
Ich nehme Sandeep Beispiel und Hinzufügen der Max-Höhe und wenn erforderlich können Sie maximale Breite Eigenschaft hinzufügen. Der Text wird bleiben, wo es bleiben soll (wenn möglich, in einigen Fällen müssen Sie einige Werte ändern, um es dort machen bleiben)
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 im p Absatz, zweiter zu Letzte, letzte Zeile.
Testen Sie es vor der Bewertung nutzlos.
Wie fügt dies etwas über die bestehende Antworten? – cimmanon
Eigenschaften für maximale Höhe und maximale Breite hinzugefügt, nichts wird verschoben, wenn sich der Cursor auf dem Text befindet und das Feld angezeigt wird. –
Vielleicht können Sie diese Antwort interessiert sein - http://StackOverflow.com/Questions/1055581/How-Do-IAd-Atool-Tip-ToSa-Span-Element/25836471#25836471 –