如何使这种悬停效果起作用？

Question

我有这个网站：link。如果您将箭头放在产品上，您会发现橙色悬停。我希望这种效果在整个产品上出现箭头（目前只在图像出现时出现）。下面是一个图像更好地了解：

.products-grid li.item .product-image:hover:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 2; 
    background: url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png"); 
} 

<ul class="products-grid one_column_4"> 
    <li class="item"> 
     <div class="regular"> 
      <!-- some code HTML --> 
     </div> 
     <div class="hover"> 
      <!-- some code HTML --> 
     </div> 
    </li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <!-- etc --> 
</ul> 

我试图用这个jQuery的代码来解决这个问题，但它不工作：

$(".item").hover(function() { 
    $(.products-grid li.item .product-image:hover:after).css("background-image", "http://www.altradona.ro/media/wysiwyg/OVERLAY.png"); 
} 
}); 

你能告诉我吗什么是错的，我该如何解决这个问题？提前致谢！

Answer 1

使用的CSS规则：

.products-grid li.item:hover .product-image:after { ... }