lulu lulu - 1 month ago 8
Javascript Question

how to make a transparent image in jQuery?

I want to make the A image transparently when the mouse pointer is over the B image
so that I can see either image.

How should I change this?

enter image description here

Answer

If you are having trouble with posting code here, read this. Make sure you include this with any jQuery code you use:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

This demo is simplified to show some possibilities.

Snippet

$(function() {
  $('.B').mouseover(function() {
    $('.A').css('visibility', 'hidden');
    $('.C').hide();
    $('.D').addClass('invisible');
  });
  $('.B').mouseleave(function() {
    $('.A').css('visibility', 'visible');
    $('.C').show();
    $('.D').removeClass('invisible');
  });
});
.invisible {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://placehold.it/100x100/000/fff?text=A" class="A">
<img src="http://placehold.it/100x100/00e/fc1?text=B" class="B">
<img src="http://placehold.it/100x100/fc1/00e?text=C" class="C">
<img src="http://placehold.it/100x100/e0e/fcf?text=D" class="D">

Comments