悬停时隐藏和显示图像答案

【问题标题】：Hide and show images on hover悬停时隐藏和显示图像
【发布时间】：2021-03-31 11:06:30
【问题描述】：

jQuery(document).ready(function(){

jQuery(".artists-main .artists-name1 a ").mouseover(function(){
    jQuery(".artists-image .artists-img1").show();
});
jQuery(".artists-main .artists-name1 a ").mouseout(function(){
    jQuery(".artists-image .artists-img1").hide();
});
    
jQuery(".artists-main .artists-name2 a ").mouseover(function(){
    jQuery(".artists-image .artists-img2").show();
});
jQuery(".artists-main .artists-name2 a ").mouseout(function(){
    jQuery(".artists-image .artists-img2").hide();
});

jQuery(".artists-main .artists-name3 a ").mouseover(function(){
    jQuery(".artists-image .artists-img3").show();
});
jQuery(".artists-main .artists-name3 a ").mouseout(function(){
    jQuery(".artists-image .artists-img3").hide();
});
    
jQuery(".artists-main .artists-name4 a ").mouseover(function(){
    jQuery(".artists-image .artists-img4").show();
});
jQuery(".artists-main .artists-name4 a ").mouseout(function(){
    jQuery(".artists-image .artists-img4").hide();
}); 

    
});

.artists-image img{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<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">
</div>

悬停时隐藏和显示图像。类艺术家-主有艺术家的名字，类艺术家-图像有艺术家的图像。它工作正常，但我的代码很长。我有大约 50 多名艺术家，页面将由 jQuery 代码填充。我想缩短它。

【问题讨论】：

您是否考虑过为此使用 css？
这怎么可能。两者都在不同的div中。有什么想法吗？

标签： javascript html jquery css wordpress

【解决方案1】：

使用相同的类名

$.each($(".artists-main .artists-name a"), function(index, element) {
  $(element).mouseover(function() {
    $('.artists-image .artists-img:eq(' + index + ')').show();
  })

  $(element).mouseout(function() {
    $('.artists-image .artists-img:eq(' + index + ')').hide();
  })
})

.artists-image img{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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


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

【讨论】：

谢谢。它现在可以工作了，我添加了 jQuery 而不是 $ 符号。

【解决方案2】：

您也可以使用原生 javascript 代码：

let images = document.querySelectorAll(".artists-img");
images.forEach(x => x.classList.add("no-display"));
function changeHover(idx) {
  images.forEach(x => x.classList.add("no-display"));
  document.getElementById("img" + idx).classList.remove("no-display");
}

.no-display {
  display: none;
}

<div class="artists-main">
  <div class="artists-name"><a  onmouseover="changeHover(1)" href="#">Artist 1</a></div>
  <div class="artists-name"><a onmouseover="changeHover(2)" href="#">Artist 2</a></div>
  <div class="artists-name"><a onmouseover="changeHover(3)" href="#">Artist 3</a></div>
</div>


<div class="artists-image">
  <img class="artists-img" id="img1" src="https://i.picsum.photos/id/474/536/354.jpg?hmac=wmJxGqF8CZdMBSMLHMqolt46tKerJulEfjVeecZJHyE">
  <img class="artists-img" id="img2" src="https://i.picsum.photos/id/266/536/354.jpg?hmac=sWDqtbQOm-fz6eG3de_B6hdMz4PpEHoxp0qn2v-C9gQ">
  <img class="artists-img" id="img3" src="https://i.picsum.photos/id/573/536/354.jpg?hmac=DLmhMwWbQZVtjZxUi5BvgENG7DfyeVxKcBdEKHIQ9k8">
</div>

Fiddle snippet

【讨论】：

【解决方案3】：

您可以使用元素的索引，并通过添加 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');
    });
});

.artists-image > div.visible-artis {
   display: none;
}

【讨论】：

【解决方案4】：

使用 index() 并避免给你的班级编号：

$(".artists-main .artists-name a").on("mouseover mouseout", function(e){
    var index = $(this).closest('div').index();
    if(e.type == "mouseover"){
        $(".artists-image .artists-img").eq(index).show();
    }
    else{
        $(".artists-image .artists-img").eq(index).hide();
    }
});

.artists-image img{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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


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

【讨论】：

【解决方案5】：

这是一个不费吹灰之力的解决方案。但我真的建议你用纯 CSS（伪元素）解决这个问题。 CSS = 演示文稿 JS = 行为

$(document).ready(function () {
  $('.artists-name1').hover(function() {
    $('.artists-img1').toggle();
  });
  $('.artists-name2').hover(function() {
    $('.artists-img2').toggle();
  });
  $('.artists-name3').hover(function() {
    $('.artists-img3').toggle();
  });
});

.artists-image img{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<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">
</div>

【讨论】：

【解决方案6】：

执行此操作的最简单方法是使用纯 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">

解决方案参考：

https://www.w3schools.com/howto/howto_css_display_element_hover.asp

【讨论】：

【解决方案7】：

.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Display an Element on Hover</h2>

<div class="myDIV">Hover over me.</div>
<div class="hide">
<img src="https://images.unsplash.com/photo-1580820726687-30e7ba70d976?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80" id="picture2" width="20%" height="auto" /></div>

</body>
</html>

【讨论】：