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

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