Menu
Hello guys, I’m having troubles in templating the design for one of our clients. attached is the design. The designer wants the <h2> <p> and the image to all have the same color when hovered. Problem is that <h2> and <p> have different styles, disabling my declared hover color.
this sample code below is similar the .h-links li:hover is set to blue, but wont take effect.
[QUOTE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “
<html xmlns=”
<head>
<style type=”text/css”>
body {
background-color:#fff;
text-align:center;
margin:auto;padding-top:50px;
font-family: tahoma, “Helvetica Neue”, Helvetica, Trebuchet MS, “Lucida Grande”, sans-serif;
}
.h-links li:hover{
background: #eee;
color: blue;
}
.h-links {
font-size:0.75em;
text-align:left;
width:450px;
padding:0; margin:0 auto;
border:dotted #777;
border-width:1px 0px 0px 0px ;
color:#222;
}
.h-links ul {
list-style-type: none;
width:450px;
margin:0; padding:0;
}
.h-links li {
border-bottom:1px dotted #777;
}
.h-links span{
font-size:0.75em;
color:#777;
font-weight:normal;
}
.h-links p{
margin:5px 0 0 0; padding:0;
color:#000;
font-weight:normal;
}
.h-links li a {
color: #CC0033;
text-decoration: none;
font-weight:600;
display:block;
padding: 15px 15px 15px 10px;
}
</style>
<title>Links Hover Example – Final</title>
</head>
<body>
<div class=”h-links”>
<ul>
<li>
<a href=”
Reduce your code. <span>12 Jul 2008</span>
<p>Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!</p> </a>
</li>
<li>
<a href=”
Use CSS to Style Link Types. <span>05 Jul 2008</span> <br/>
<p>Ever wanted to style your links to represent the type of content it links too without having to add a class to each link? Well I’m here again to save the day with a no brainier solution. This is quick and simple so I’ll get right too it.</p></a>
</li>
<li>
<a href=”
Fancy Forms <span>28 Jun 2008</span></a>
</li>
<li>
<a href=”
Columns dropping off <span>21 Jun 2008</span></a>
</li>
<li>
<a href=”
Accessibility Checklist <span>14 Jun 2008</span> </a>
</li>
</ul>
</div>
</body>
</html>
[upl-file uuid=d67afefb-47ac-43c6-8dd3-8f2003354726 size=37kB]Capture.JPG