Highlighting a bunch of tags and staying w3c compliant
Posted: Fri Nov 03, 2006 6:22 pm
I am building an ecommerce store, and right now I'm working on the product list page... the layout consists of a list of divs that contain the product's name, a thumbnail and an outline (around the div). I'd like for all three of these things to highlight orange when you hover over any of them. So let's say you just hover over the div (not the image or the text). I'd like it to highlight all of them at once. does that make sense? If so, is it possible without javascript and still with the ability to be w3c compliant? How could I accomplish this?
Oh and I'd also like for any one of those to be "clickable" and take you to that product's page.
This is what I'm doing for now... but I don't particularly like it:
Oh and I'd also like for any one of those to be "clickable" and take you to that product's page.
This is what I'm doing for now... but I don't particularly like it:
Code: Select all
<div class="product_category" onclick="javascript:jsLink(this, '/pc/PL-MP-HD/DAK30');">
<div class="image">
<div class="no_photo"><a href="/pc/PL-MP-HD/DAK30"><img src="images/products/DAK30.jpg" alt="Heli-Pack w/70 oz Reservoir"></a></div></a>
</div>
<div class="details">
<div class="title"><a href="/pc/PL-MP-HD/DAK30">Heli-Pack w/70 oz Reservoir</a></div>
<div class="price">$80.00</div>
</div>
</div>Code: Select all
/* Product Styling */
.product_category, #related_products div.image{
width: 140px;
height: 140px;
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #bbb;
text-align: center;
}
/* Hides from IE5-mac \*/
* html .product_category, #related_products div.image {margin: 3px; padding: 2px;} /* Only show to IE-Win */
/* End hide from IE5-mac */
.product_category:hover, #related_products div.image:hover{
border: 1px solid #000;
cursor: pointer;
}
.product_category div{
margin: auto;
}