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.


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


.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:

enter image description here

2 Answers 2


Try this one

.products-grid li.item:hover { background-color: #d1d1d1; color:#fff;}
.products-grid li.item:hover a { background-color: #d1d1d1; color:#fff;}
  • I've done this, it only highlights the link itself and not the entire tile.
    – SR_Magento
    Mar 21, 2014 at 13:07
  • i read the question too quick. what marius said ;-)
    – tecjam
    Mar 21, 2014 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.