1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
font-family : Verdana, Arial;
}
#titre {
width : 600px;
margin : auto;
}
h3 {
text-align: left;
color: #f00;
font-size: 12px;
}
.articles {
font-size : 13px;
position : relative;
border : 1px solid #e0e0e0;
width : 352px;
height : 123px;
margin : auto;
padding : 1px;
}
.articles {
border: 1px solid #000000;
height: 128px;
position: relative;
width: 352px;
}
.articles ul{
width:190px;padding:0;list-style-type:none;list-style-position:outside;position:relative;/*line-height:1.5em;*/margin-top: 0; margin-right: 1px; margin-bottom: 0;margin-left: 0;visibility: visible;
}
.articles li h3 a{text-decoration:none; color:#ebfff3; background-color: #7385a3;display:block; padding:1px 2px;}
.articles li{float:left; margin:1px;background-color: #fff;height:60px;}
.articles li h3 a:hover{background-color: #7385a3;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid}
.articles li {
cursor : pointer;
}
.articles .info {
top : 0px;
left : 200px;
width : 150px;
height : 250px;
border : 1px solid #f0f080;
background-color : #fff;
padding : 5px;
}
.articles .nimg {
position:absolute;
left:190px;
top:0; right:0;
border : 1px solid #f0f080;
background-color : #fff;
padding : 1px;
}
.articles .imag {
height: 120px;
width: 150px;
}
.articles li div {
display : none;
}
.articles .where{
position : absolute;
color : #e0e0e0;
font-weight : bold;
background-color : #fff;
border : 1px solid #e0e0e0;
}
.articles li:hover div {
position : absolute;
display : block;
}
.articles h3.selected {
background-color: #7385a3;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
<div class="where nimg">
<img class="imag" src="../news1.jpg">
</div>
<ul>
<li><div class="nimg"><img class="imag" src="../news1.jpg"></div><h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</h3></a></li>
<li><div class="nimg"><img class="imag" src="../news2.jpg"></div><h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</h3></a></li>
<li><div class="nimg"><img class="imag" src="../news3.jpg"></div><h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</h3></a></li>
</ul>
</div>
<br />
<div class="articles">
<div class="where nimg">
<img class="imag" src="../news1.jpg">
</div>
<ul>
<li><div class="nimg"><img class="imag" src="../news1.jpg"></div><h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</h3></a></li>
<li><div class="nimg"><img class="imag" src="../news2.jpg"></div><h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</h3></a></li>
<li><div class="nimg"><img class="imag" src="../news3.jpg"></div><h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</h3></a></li>
</ul>
</div>
<br /><br />
<b>Attention</b> :
<br /><i>ne fonctionne pas sur IE6</i>
</body>
</html> |
Partager