ایجاد استایل در هنگام hover

سلام
دوستان من یه همچین owl carousel دارم که توش 24 تا محصول قرار داره ، میخوام با jquery کد بزنم که وقتی رو title هر کدوم رفتم عکس خود اون محصول bg ش عوض شه ولی مشکلم اینه که کل محصولات رنگش bg عوض میشه.

<ul class="products products-slider owl-carousel ...etc">
    <div class="owl-stage-outer owl-height" style="height: 421px;">
        <div class="owl-stage">
            <div class="owl-item" style="width: 310.8px;">
                <li class="show-links-outimage post-10080 ...etc">
                    <div class="product-inner">
                        <div class="product-image">

                        </div>
                        <a href="">
                            <h3 class="woocommerce-loop-product__title">اسید سولفوریک</h3>
                        </a>
                    </div>
                </li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                ...
            </div>
        </div>
    </div>
</ul>

کد jquery هم اینه:

$('.product-inner').find(".woocommerce-loop-product__title").hover(function() {
        $('.product-inner').find(".product-image").css("background-color", "#093f89");
    }, function() {
        // on mouseout, reset the background colour
        $('.product-inner').find(".product-image").css('background-color', '');
    });

میخوام هر وقت اون h3 عه که title عه روش hover شد کلاس.product-image رنگش زمینه ش عوض شه