mouse over effect on grid / list view

Question

I'm trying to get color to appear on the product tile that a visitor hovers over. So far I've only been able to affect the link itself and not the entire tile.

list.phtml

<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif;?> "onclick="setLocation('<?php echo $_product->getProductUrl() ?>')">

css

.products-grid li.item  a:hover { background-color: #d1d1d1; color:#fff;}

Now, searching I've found that the a:hover will only activate the actual link. I tried to encase the li class into a div

<div class="hover"> <li> </li> </div> 

and dropped the a:hover in the css but I'm just not getting the result I want.

How can I make the product tile change color when a user hovers over it?

EDIT: This is the current effect:

Answer 1

Try this one

.products-grid li.item:hover { background-color: #d1d1d1; color:#fff;}

Answer 2

.products-grid li.item:hover a { background-color: #d1d1d1; color:#fff;}