CSS: Tillåta fler divar inom :HOVER?

JesperA · 2009-03-01, 12:38

Hejsan!

Jag har dolt ett element: .profileavatar_controls { display: none; } och för att få fram elementet så har jag helt enkelt
gjort .profileavatar:hover .profileavatar_controls { display: block; } på ett annat element (ja jag kallar det element)

Problemet med detta är att jag vill placera några divar inom den diven som jag tidigare har dolt, så när jag för musen över .profileavatar så skall .profileavatar_controls visa sig själv och alla andra divar inom sig.

Men detta totalvägras.

HTML ser ut såhär:

Kod:

<div class="profileavatar">
	<img src="/profile/JesperA/avatar.jpg" />
	<div class="profileavatar_controls"><!-- Tahoma 14px -->
 <div class="avatarpopup_top">hejsan	1</div>
 
 
	</div>
</div>

Några förslag?

allstars · 2009-03-01, 15:59

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.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS: Tillåta fler divar inom :HOVER?