CODEWITHSUNDEEP
jqueryhtmlcss
Cristi
Cristi

Reputation: 61

How can I make this hover effect to work?

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:

enter image description here

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

Upvotes: 0

Views: 103

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Use as CSS rule: 

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

Upvotes: 1

Related Questions