@misha_mishy

Как можно сократить данный код?

Как можно сократить данный код без использования кучи классов и id?
Как это можно сделать при помощи переменной this?

https://codepen.io/Misha_mishy/pen/wvBYXGw

//menu-1
    $('#menu__item-1').mouseenter(function(){
    $('#menu__item-2').css('opacity','0.4');
    $('#menu__item-3').css('opacity','0.4');
    $('#menu__item-4').css('opacity','0.4');
})

$('#menu__item-1').mouseleave(function(){
    $('#menu__item-2').css('opacity','1');
    $('#menu__item-3').css('opacity','1');
    $('#menu__item-4').css('opacity','1');
})
// menu-2
$('#menu__item-2').mouseenter(function(){
    $('#menu__item-1').css('opacity','0.4');
    $('#menu__item-3').css('opacity','0.4');
    $('#menu__item-4').css('opacity','0.4');
})

$('#menu__item-2').mouseleave(function(){
    $('#menu__item-1').css('opacity','1');
    $('#menu__item-3').css('opacity','1');
    $('#menu__item-4').css('opacity','1');
})
//menu-3
$('#menu__item-3').mouseenter(function(){
    $('#menu__item-1').css('opacity','0.4');
    $('#menu__item-2').css('opacity','0.4');
    $('#menu__item-4').css('opacity','0.4');
})

$('#menu__item-3').mouseleave(function(){
    $('#menu__item-1').css('opacity','1');
    $('#menu__item-2').css('opacity','1');
    $('#menu__item-4').css('opacity','1');
})
  • Вопрос задан
  • 218 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
А js обязательно? Без js это легко можно сделать так:
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега CSS
Всем элементам добавляете общий класс menu__item, ну и вперёд:

.opacity {
  opacity: 0.4;
}

const $items = $('.menu__item')
  .mouseenter(e => $items.not(e.target).addClass('opacity'))
  .mouseleave(e => $items.removeClass('opacity'));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы