如何使這種懸停效果起作用？

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 { ... }