CSS3 Tooltips 2
2012.11.01. 18:03
Demó:
HTML kód:
<html>
<div class="tooltip-container">
<a href="www.fuckinway.gportal.hu">Mutass erre a linkre!</a>
<div>
Ide jöhet a te szöveged.
</div>
</div>
</html>
CSS kód:
<style>
.tooltip-container {
position:relative;
}
.tooltip-container > div {
opacity:0;
z-index:-1;
position:absolute;
background:rgba(0,0,0,0.8);
border:1px solid rgba(0,0,0,0.9);
color:#FFF;
padding:5px;
color:#FFF;
width:150px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
transition: all 0.2s ease-in;
left:0px;
top:30px;
}
.tooltip-container > div:before {
content:"";
top:-10px;
left:20px;
position:absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.9);
}
.tooltip-container a:hover ~ div {
opacity:1;
z-index:1;
}
</style>
|