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

我有这个网站：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");
}
});

您能告诉我什么地方出了问题，我该如何解决呢？提前致谢！

最佳答案

用作CSS规则：

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