Mouseenter и mouseleave как реализовать?

Question

[privat13]

Доброго времени суток. Ссылка на результат https://ww.net.ru/test/ . Проблема - при наведении на изображение ГЛОНАСС остальные иконки должны стать серыми, но они мерцают.

Логика. Рисуются svg, потом они исчезают. На их месте появляются цветные svg. При наведении на любой цветной svg, остальные должны стать серыми. Но они мерцают.

Код:

<!--Контурные svg-->
    <div class="main">
        <div class="item">
            <svg version="1.1" id="outlgl" xmlns="http://www.w3.org/2000/svg"</svg>
        </div>
        <div class="item">
           <svg version="1.1" id="outlgl" xmlns="http://www.w3.org/2000/svg"</svg>
        </div>
        <div class="item">
           
        </div>
        <div class="item">
            <svg version="1.1" id="outlgl" xmlns="http://www.w3.org/2000/svg"</svg>
        </div>
    </div>
    <!--Конец Контурные svg-->

    <!--Цветные svg-->
    <div class="main-color">
        <div class="item">
            <img src="img/main-gl-color.svg" alt="" class="item__img-color color-gl">
        </div>
        <div class="item">
                <img src="img/main-tah-color.svg" alt="" class="item__img-color color-tah">
        </div>
        <div class="item">
            <img src="img/main-dop-color.svg" alt="" class="item__img-color color-dop">
        </div>
        <div class="item">
            <img src="img/main-med-color.svg" alt="" class="item__img-color color-med">
        </div>
    </div>
    <!--Конец Цветные svg-->

    <!--Серые svg-->
    <div class="main-grey">
        <div class="item">
            <img src="img/main-gl-grey.svg" alt="" class="item__img-grey grey-gl">
        </div>
        <div class="item">
            <img src="img/main-tah-grey.svg" alt="" class="item__img-grey grey-tah">
        </div>
        <div class="item">
            <img src="img/main-dop-grey.svg" alt="" class="item__img-grey grey-dop">
        </div>
        <div class="item">
            <img src="img/main-med-grey.svg" alt="" class="item__img-grey grey-med">
        </div>
    </div>
    <!--Конец Серые svg-->

$('.main').delay(1000).fadeOut(300);
$('.item__img-color').delay(1000).fadeIn(300).css("z-index", "100");

$('.color-gl').mouseenter(function(event) {
    $('.color-tah, .color-dop, .color-med').fadeOut(300);
    $('.grey-tah, .grey-dop, .grey-med').fadeIn(300);
});

$('.color-gl').mouseleave(function(event) {
    $('.color-tah, .color-dop, .color-med').fadeIn(300);
    $('.grey-tah, .grey-dop, .grey-med').fadeOut(300);
});

Answer 1

[I'm Yoda]

Так попробуйте:

$('.color-gl').mouseenter(function(event) {
    $('.color-tah').fadeOut(300);
    $('.grey-tah').fadeIn(300);
    $('.color-dop').fadeOut(300);
    $('.grey-dop').fadeIn(300);
    $('.color-med').fadeOut(300);
    $('.grey-med').fadeIn(300);
}).mouseleave(function(event) {
    $('.color-tah').fadeIn(300);
    $('.grey-tah').fadeOut(300);
    $('.color-dop').fadeIn(300);
    $('.grey-dop').fadeOut(300);
    $('.color-med').fadeIn(300);
    $('.grey-med').fadeOut(300);
});

Comments

[privat13]

Ситуация не изменилась. Мерцание осталось

Answer 2

[privat13]

Решение нашлось. Расставил z-index для каждой группы картинок. Контуры снизу, серые чуть выше и цветные на самом верху. Все заработало. Спасибо все за реакцию

Answer 3

[Антон Усачев]

Слишком много ненужного кода. Особенно, когда можно обойтись парой строчек цсс:

.main-color:hover .item img {
	transition: opacity .3s ease;
}

.main-color:hover .item img.item__img-color {
	opacity: 0;
}

/* item, который должен оставаться цветным получает класс active */
.main-color:hover .item img.item__img-color:hover,
.main-color:hover .item.active img.item__img-color {
	opacity: 1;
}

Comments

[privat13]

Спасибо, Антон. Попробую. Видать я зациклился на jquery. И могу не видеть очевидных простых решений))