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

ثبت پرسش جدید

Alireza Kafi

@alirezakafi 5 سال پیش مطرح شد

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

$('.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', '');
});

ارسال پاسخ

علی سرلک

@aliesarlak 5 سال پیش مطرح شد

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

ارسال پاسخ

Alireza Kafi

@alirezakafi 5 سال پیش مطرح شد

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

$('.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', '');
});

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید