studio9.ws > how-to-design-a-web-page.php

how to highlight a div tag using pure CSS

Highlighted Div Tag
You will notice that the background color changes if you place your mouse here, inside this div tag. This is the effect that we're trying to achieve.

Learn how to highlight a div tag using pure CSS, no javascript, and validate your web page on the W3C validator

The HTML
<div id='highlight'>
<a href="#">
<span class='phead'>Your text here</span><br />
<span>Your text here</span>
</a>
</div>

The CSS


#highlight{

list-style-type: none;

margin: 0 0 10px 0;

padding: 0;

width: 100%;}



#highlight a{

display: block;

padding: 10px;

width: 99%;

background-color: #cfc;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border: 5px solid #090;

}



#highlight a:link{

text-decoration: none;

color: #000;

background-color: #cfc;

}



#highlight a:hover{

color: #000;

background-color: #8cd88c;

}

Web Design Your Business™

call 1-866-858-6387

email: webmaster from studio9_ws

Return