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

Question

[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');
})

Answer 1

[Виталий Першин]

А js обязательно? Без js это легко можно сделать так:

Answer 2

[0xD34F]

Всем элементам добавляете общий класс menu__item, ну и вперёд:

.opacity {
  opacity: 0.4;
}

const $items = $('.menu__item')
  .mouseenter(e => $items.not(e.target).addClass('opacity'))
  .mouseleave(e => $items.removeClass('opacity'));

Answer 3

[iddqda]

div:hover {
    opacity: 0.4;
}