CODEWITHSUNDEEP
jqueryhtmlonmouseover
Green_Crocodile
Green_Crocodile

Reputation: 33

shown image only after mouse hover 2 times?

It's very simple code 

 <img src="images/Card.png" id=I1 class="img"/> 
 <img src="images/Card.png" id=I2 class="img"/> 
 <img src="images/Card.png" id=I3 class="img"/> 
 <img src="images/Card.png" id=I4 class="img"/> 

 <img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
 <img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
 <img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
 <img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />

<script>
 $('.img').mouseover(function() {

        var GetId = this.id.substring(1);

        $("#I" + GetId).hover(
        function () { $("#myImage" + GetId ).show();  },
        function () { $("#myImage" + GetId ).hide();  }  ); 

    });
</script>

It's working fine, but it have one problem you need put mouse over 2 times to display image.

Google the problem but no solution.

Can any one help?

Thank you

Upvotes: 0

Views: 102

Answers (2)

Heady
Heady

Reputation: 985

IF you can group the images together should do this by using pure css. If not use Taplar's answer. Example:

html:

<!-- repeat for all your images -->
    <div class="image-wrapper">
    <img class="img">
    <img class="image-on-hover">
    </div>

CSS:

.image-on-hover{
display:none
}

.img:hover ~.image-on-hover{
display: block
}

Explanation: The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together

Different option if your grouping is exactly like the example:

.image-on-hover{
display: none;
}

/*repeat for every image pair */

#I1:hover ~ #myImage1{
display:block
}

Upvotes: 0

Taplar
Taplar

Reputation: 24965

You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.

$('.img')
  .on('mouseenter', function(){
    $('#'+ $(this).data('target')).show();
  })
  .on('mouseleave', function(){
    $('#'+ $(this).data('target')).hide();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />

<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />

Upvotes: 1

Related Questions