i IE6 fungerar det tämligen dåligt men i IE7, FF och andra nyare webbläsare skall det fungera med enbart CSS
Kod:
<?xml version="1.0" encoding="utf-8"?>
<!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>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" href="css/css.css"/>
<!--[if lt IE 7]><script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
$(".profileavatar").hover(function(){
$(this).find(".controls").addClass("show");
},function(){
$(this).children().removeClass("show");
}
);
});
</script>
<![endif]-->
<style type="text/css">
* {margin:0; padding:0;}
img,a img {border:0;}
.maindiv {width: 650px;}
.profileavatar {
float: left;
border: 1px solid #ddd;
position: relative;
width: 180px; /*200px*/
height: 250px;
margin: 10px 10px 0 0;
color: #777;
}
.profileavatar.last {margin-right:0;}
.profileavatar img {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 40px;
background:#f5f5f5;}
.profileavatar .controls {
display:none;
position: absolute;
width: 160px;
height: 250px;
top: 50px;
left:10px;
}
.maindiv a:hover .controls,
.profileavatar .show{display: block;}
.clear {clear:both; height: 1px; line-height: 1px; visibility:hidden;}
</style>
</head>
<body>
<div class="maindiv">
<a class="profileavatar" href="sida1">
<img src="/profile/JesperA/avatar.jpg" />
<div class="controls">
<h2 class="avatarpopup_top">hejsan 1</h2>
<p>En liten beskrivning</p>
</div>
</a>
<a class="profileavatar" href="sida2">
<img src="/profile/JesperA/avatar.jpg" />
<div class="controls">
<h2 class="avatarpopup_top">hejsan 1</h2>
<p>En liten beskrivning</p>
</div>
</a>
<a class="profileavatar" href="sida3">
<img src="/profile/JesperA/avatar.jpg" />
<div class="controls">
<h2 class="avatarpopup_top">hejsan 1</h2>
<p>En liten beskrivning</p>
</div>
</a>
<a class="profileavatar" href="sida4">
<img src="/profile/JesperA/avatar.jpg" />
<div class="controls">
<h2 class="avatarpopup_top">hejsan 1</h2>
<p>En liten beskrivning</p>
</div>
</a>
<hr class="clear"/>
</div>
</body>
</html>
För äldre webbläsare (eller ie6 i detta exemplet) får man ta till javascript för att få det att fungera.