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

- 1 روز پیش
توسط Alireza Kafi آپدیت شد
Alireza Kafi ( 255 تجربه )
3 روز پیش

سلام
دوستان من یه همچین 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 رنگش زمینه ش عوض شه

بهترین پاسخ انتخاب شده توسط Alireza Kafi
Alireza Kafi
3 روز پیش

مشکل حل شد . ممنون.
اینم کدش:

$('.product-inner').find(".woocommerce-loop-product__title").hover(function() {
    var unique_class = '.' + $(this).parent().closest('li').attr('class').split(' ')[1];
    $(unique_class).find(".product-image").css("background-color", "#093f89");
}, function() {
    // on mouseout, reset the background colour
    $('.product-inner').find(".product-image").css('background-color', '');
});
علی سرلک ( 515 تجربه )
3 روز پیش

علی رضا عزیز لطفا تصویری از موردی که میفرمایین ارائه کنین که بهتر بشه بهتون کمک کرد

Alireza Kafi ( 255 تجربه )
3 روز پیش

مشکل حل شد . ممنون.
اینم کدش:

$('.product-inner').find(".woocommerce-loop-product__title").hover(function() {
    var unique_class = '.' + $(this).parent().closest('li').attr('class').split(' ')[1];
    $(unique_class).find(".product-image").css("background-color", "#093f89");
}, function() {
    // on mouseout, reset the background colour
    $('.product-inner').find(".product-image").css('background-color', '');
});
برای ارسال پاسخ باید وارد سایت شوید