Javascript 悬停时分别激活元素

悬停时需要激活三个元素。这些元素也在不同的div中使用，并共享相同的元素和类。我正在使用JavaScript来实现这一点

问题是当悬停在div1上时，它也会激活div2和div3。可能是因为它们共享相同的元素

在悬停时如何单独激活它们

$（函数（）{
$（“.link”）
.悬停(
函数（）{
$（“.link”）.css（'color'、'red'、'text decoration'、'none'）；
$（“.box”）.css（'border-bottom'，'4px-solid#183c94'）；
$（“span”）.css（'opacity'，'1'）；
},
函数（）{
$（“link”）.css（'color'，'#000000'）；
$（“.box”）.css（'border-bottom'，'4px solid#cfcfcfcf'）；
$（“span”）.css（'opacity'，'0'）；
});
});
.box{
宽度：300px；
高度：30px；
背景#f1f1；
文本对齐：居中；
}
跨度{
高度：10px宽度：10px；
背景：#C3C3；
}

+
+
+
使用jQuery$（this）关键字

$(function () {
    $(".link").hover(function () {
        $(this).css('color', 'red', 'text-decoration', 'none');
        $(".box").css('border-bottom', '4px solid #183c94');
        $("span").css('opacity', '1');
},

function () {
    $(this).css('color', '#000000');
    $(".box").css('border-bottom', '4px solid #cfcfcf');
    $("span").css('opacity', '0');
   });
});

我更新了你的小提琴，我不知道你如何处理悬停时的长方体或跨度元素。
你需要使用
此
来“查找”元素：

$(function () {
    $(".link")
    .hover(
        function () {
            $(this).css('color', 'red', 'text-decoration', 'none');
            $(this).closest(".box").css('border-bottom', '4px solid #183c94');
            $(this).next("span").css('opacity', '1');
        },

        function () {
            $(this).css('color', '#000000');
            $(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
            $(this).next("span").css('opacity', '0');
        });
});


同样在CSS中：

span {
  height: 10px widtth: 10px;
  background: #c3c3c3;
}

应该是：

span {
    height:10px; width:10px;
    background: #c3c3c3;
}