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

Question

I have this site: link . If you put arrows on a product you'll notice that there is an orange hover. I want this effect to occur the whole time arrow is on the product (currently only appears when the image). Here's an image to understand better:

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

I tried to use this jQuery code to solve the problem but it's not working:

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

Can you tell me please what is wrong and how can I solve this problem? Thanks in advance!

Answer 1

用作CSS规则：

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