Can Wordpress hide & show images on hover?

Nasir
May 14, 2023
171 views
7 votes
7 Answers

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>

Hide and show images on hover. Class artists-main has artists names and class artists-image has images of the artists. It’s working fine but my code is lengthy. I have round about 50+ artists and page will be filled by jQuery code. I want to shorten it.

Answers

You can also use native javascript code:

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

use same class name

$.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>

The SIMPLEST way to do this would be using purely CSS, you may follow the example given here :

.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">

Solution reference :

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

You can use the index of the element, and control visibility by adding CSS class:

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;
}

using index() and avoiding to number your class:

$(".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>

This is a no effort solution. But I really recommand that you settle this up with pure CSS (pseudo-elements).
CSS = Presentation
JS = Behaviour

$(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>

.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>

Please signup or login to give your own answer.

Click here to cancel reply.

Can WordPress hide & show images on hover?

Answers