| FAQ |
| Kalender |
2009-03-01, 12:38
|
#1 | ||
|
|||
|
Medlem
|
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> |
||
|
 Svara med citat
|
|
2009-03-01, 15:59
|
#2 | ||
|
|||
|
Klarade millennium-buggen
|
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>
|
||
|
|
Svara med citat
|
| Svara |
«
Föregående ämne
|
Nästa ämne
»
| Ämnesverktyg | |
| Visningsalternativ | |
Linjär visning
|
|
Alla tider är GMT +2. Klockan är nu 13:50.