Javascript 悬停时隐藏和显示图像

jQuery（文档）.ready（函数（）{
jQuery（“.artists-main.artists-name1 a”）.mouseover（函数（）{
jQuery（“.artists image.artists-img1”）.show（）；
});
jQuery（“.artists-main.artists-name1 a”）.mouseout（函数（）{
jQuery（“.artists-image.artists-img1”）.hide（）；
});
jQuery（“.artists-main.artists-name2 a”）.mouseover（函数（）{
jQuery（“.artists-image.artists-img2”）.show（）；
});
jQuery（“.artists-main.artists-name2 a”）.mouseout（函数（）{
jQuery（“.artists-image.artists-img2”）.hide（）；
});
jQuery（“.artists-main.artists-name3 a”）.mouseover（函数（）{
jQuery（“.artists image.artists-img3”）.show（）；
});
jQuery（“.artists-main.artists-name3 a”）.mouseout（函数（）{
jQuery（“.artists image.artists-img3”）.hide（）；
});
jQuery（“.artists-main.artists-name4a”）.mouseover（函数（）{
jQuery（“.artists image.artists-img4”）.show（）；
});
jQuery（“.artists-main.artists-name4a”）.mouseout（函数（）{
jQuery（“.artists-image.artists-img4”）.hide（）；
}); 
});
.artists图像img{display:none；}
您还可以使用本机javascript代码：


let images=document.querySelectorAll（“.artists img”）；
images.forEach（x=>x.classList.add（“无显示”）；
函数更改悬停（idx）{
images.forEach（x=>x.classList.add（“无显示”）；
document.getElementById（“img”+idx）.classList.remove（“无显示”）；
}
。无显示{
显示：无；
}

使用相同的类名


$.each（$（“.artists main.artists name a”），函数（索引，元素）{
$（元素）.mouseover（函数（）{
$（'.artists image.artists img:eq（'+index+'））.show（）；
})
$（元素）.mouseout（函数（）{
$（'.artists image.artists img:eq（'+index+'））.hide（）；
})
})
.artists图像img{display:none；}
实现这一点的最简单方法是使用纯CSS，您可以按照此处给出的示例进行操作：

.artists-img1 {
  display : none;
}
.artists-name1:hover + .artists-img1 {
  display: block
}

<div class="artists-main">
<div class="artists-name1"><a href="#">Artist 1</a></div>
<div class="artists-name2"><a href="#">Artist 2</a></div>
<div class="artists-name3"><a href="#">Artist 3</a></div>
</div>


<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">


.artists-img1{
显示：无；
}
.artists-name1:hover+.artists-img1{
显示：块
}

解决方案参考：

您可以使用元素的索引，并通过添加CSS类来控制可见性：

jQuery(document).ready(function(){
    jQuery(".artists-main > div").mouseover(function(){
        var current_index = $(this).index();
        $('.artists-image > div').removeClass('visible-artist');
        $('.artists-image > div').eq(current_index).addClass('visible-artist');
    });
});

使用index（）并避免为类编号：


$（.artists main.artists name a”）.on（“mouseover mouseout”，函数（e）{
var index=$（this）.closest（'div'）.index（）；
如果（e.type==“鼠标悬停”）{
$（“.artists image.artists img”）.eq（index.show（）；
}
否则{
$（“.artists image.artists img”）.eq（index.hide（）；
}
});
.artists图像img{display:none；}
这是一个不劳而获的解决方案。但我真的建议你用纯CSS（伪元素）解决这个问题。
CSS=演示文稿
JS=行为


$（文档）.ready（函数（）{
$（'.artists-name1'）。悬停（函数（）{
$（'.artists-img1'）.toggle（）；
});
$（'.artists-name2'）。悬停（函数（）{
$（'.artists-img2'）.toggle（）；
});
$（'.artists-name3'）。悬停（函数（）{
$（'.artists-img3'）.toggle（）；
});
});
.artists图像img{display:none；}


.hide{
显示：无；
}
.myDIV:悬停+隐藏{
显示：块；
颜色：红色；
}

悬停显示元素
在我头顶上盘旋。
您考虑过使用css吗？这是怎么可能的。两人都在不同的部门。知道吗？谢谢。它现在工作了，我添加了jQuery而不是$sign。如果有用的话，请向上投票我的答案，谢谢
.artists-image > div.visible-artis {
   display: none;
}