An easy way to get a rollover text using only CSS (without coding, javascript...). Here you are:
We use two classes (or ID): .rollover for emergent text and .rollover_activador used in text that must activate the rollover.
<span class="rollover_activador">[i]<span class="rollover">Rollover text</span></span>
And, in our .css style file, we use next styles:
.rollover{
display:none;
}.rollover_activador{
position: relative;
}.rollover_activador:hover .rollover{
display:inline;
position: absolute;
z-index: 10;
background-color: yellow;
}
Easy, isn't it?
20120802 update: I've find a different approach, in Linkedin. I think is a better code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.rollover:hover {
cursor:pointer;
color:red;
}
.rollover:hover:before {
content:"este";
}
</style>
</head>
<body>
<span class="rollover"> ejemplo</span>
</body>
</html>