...

View Full Version : Change div color on hover...



webosb
07-18-2007, 06:01 PM
Im trying to create a box on the left corner with links inside and when you hover over a link, the 15px grey will change color but I cant think of how i can do it.... and i feel the code is a bit cluttered....

Is there a better way of accomplishing this:


<div style="
float: left;
width: 150px;
border-style: solid;
border-top-style: none;
border-left-style: none;
border-right-width: thin;
border-right-color: #CAF2FA;
border-bottom-width: 1px;
border-bottom-color: #CAF2FA;
margin: 0 auto;
padding: 0;
">
<div style="height: 25px; background-color: #f2feff;"><span style="width: 15px; height: 25px; display: block; background-color: #DEF5F7;"></span></div>
<div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;"><a href="#">dasdasdasd<br />Blah 1<br />Blah 2<br />Blah 3</a></div></div>
<div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>
<div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>
<div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>

</div>

ahallicks
07-18-2007, 06:28 PM
Do you want the whole box to change colour, or just the link background? A list of links should be in a list rather than a bunch of divs. You can use the :hover pseudo class on <a> elements only in IE

webosb
07-18-2007, 07:37 PM
i tried the list method first but then when i added line breaks, it didn't line up correctly...

VIPStephan
07-18-2007, 08:18 PM
Now, first and foremost: semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) is the way to go. As ahallicks stated correctly a list of links belongs in an actual list. Then you donít add line breaks in the HTML, you style that list with CSS. Thatís what this whole shebang is made for.

Semantic code means: no useless elements. An element is useful if it marks its content properly, i.e. <p> for a paragraph of text, <h1> for a primary headline, <ul> for an unordered list, <div> for a logical division of the page (ead more on this in this article (http://brainstormsandraves.com/articles/semantics/structure/)). The basic thought is: if it doesnít make sense when viewed without styles then itís wrong.

Now back to your actual problem. Try this:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul {
clear: left;
margin: 0;
padding: 25px 0 0 0;
list-style: none;
border: 1px solid #CAF2FA;
border-left: none;
width: 150px;
background-color: #F2FEFF;
}
li {}
li a {
border-left: 15px solid #EBF1F1;
display: block;
width: 135px; /* needed for IE */
background-color: white;
}
li a:hover {border-color: #900;}
</style>
</head>

<body>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</body>
</html>


You might wanna add a background image to the ul element for the little square on top left.

webosb
07-18-2007, 09:30 PM
Ahhh yes.. i kinda knew my code was cluttered and messy. Thanks for the link Stephan and much thanks for the alterations. I really appreciate it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum