.hover not working when used with .html

Question

I am trying to do a simple image rollover with jQuery, but this code is not working:

HTML:

<div class="secondcircle" id="circleone">
    <p>
        <img src="/../ex/img/group1.png">
    </p>
</div>

JS:

$("#circleone").hover(
  function () {
    $(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
  },
  function () {
    $(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
  }
);

The mouse enter event fires just fine, but none happens when the mouse leaves.

Moreover, the code works fine with simpler actions - the example in the jQuery docs of appending a span then removing it works just fine.

Why would the html not be working? I've been stuck on this for ages.

Update: Nearly every answer/comment suggests just replacing the image source, and while this works perfectly (thanks!) sometimes I do need to change the HTML (such as to change text). This was just one example. Sorry, I should have better specified that in the question.

If you're using jQuery why are you doing `document.getElementById('circleone').innerHTML` instead of `$('#circleone').html()`? — j08691, Jun 26 '13 at 21:01
your code look's fine. the only thing I can think of is the way your are checking for `mouseleave` . `div` is a block level element so the whole width of the block will not fire the event... Also why not just replace the src of the image instead of replacing the entire html — Sushanth --, Jun 26 '13 at 21:04
@j08691 Sorry, I actually wasn't using that but that was one of the many many things I tried and accidentally copied the wrong code into SO but it had no effect (naturally) so changed it back. — samiles, Jun 26 '13 at 21:06
Code looks fine. Make sure you actually move the mouse out of the div. Change its color to make sure you know what area of the screen it occupies. — Alex Polkhovsky, Jun 26 '13 at 21:07
It works with static DIV height, so it is not simply the html() call: http://jsfiddle.net/balintbako/zPFww/ (and it can be reproduced easily without the static height) — Balint Bako, Jun 26 '13 at 21:08
why change the entire html content as opposed to just the `src` value? Or better yet, why not use a background image and change classes? — Mike Brant, Jun 26 '13 at 21:09
I should have specified in the question that just in this case I wanted the image to change, but across the site sometimes the text or whatever else inside needs to change, hence why I used HTML. — samiles, Jun 26 '13 at 21:14
Going the CSS route would save you so much time and effort. jQuery's hover functionality is quite buggy. — AlbertEngelB, Jun 26 '13 at 21:14
@samiles You can't change the HTML, but based on what you're doing, you don't need to. You can change the background-image CSS property, which will change the image. You can even get fancy and implement [card flipping as well.](http://desandro.github.io/3dtransforms/docs/card-flip.html) — AlbertEngelB, Jun 26 '13 at 21:19
I think, Issue is that mouseenter (hover)is attached to the p element here as it occupies complete space of the div and when you replace it the paining event is lost so no mouseleave of hover triggers on it anymore. If you try using event delegation in the div element it will work. — PSL, Jun 26 '13 at 21:21

score 2 · Accepted Answer · answered Jun 26 '13 at 21:08

2

Instead of replacing your entire HTML is is a better idea to just change the source of the image.

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);

answered Jun 26 '13 at 21:08

Sushanth --

55,259
9
66
105

Thank you, this works as long as I remove those escape slashes on the URL. I should have specified in the q that I wanted to use HTML as I wasn't sure what else it might need to do in the future, but this will do for now. – samiles Jun 26 '13 at 21:13
@samiles. Glad to have helped.. you could also have used single quotes instead of espacing `src='/../ex/img/group2.png'` – Sushanth -- Jun 26 '13 at 21:14

score 2 · Answer 2 · answered Jun 26 '13 at 21:08

It works if you adjust it so it just replaces the img, like this:

http://jsfiddle.net/7etUU/

I think the main issue is your div being a block element that spans 100% of the width, then the contents get replaced on hover which removes the content, so it flashes.

score 2 · Answer 3 · edited May 23 '17 at 10:32

2

Why not do this with CSS?

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

Totally stole this from this question.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 26 '13 at 21:09

AlbertEngelB

16,016
15
66
93

score 1 · Answer 4 · answered Jun 26 '13 at 21:05

1

I think your div is taking 100% width. Try adding a "float:left" CSS property. Like this...

.secondcircle{
    float : left;
}

answered Jun 26 '13 at 21:05

mohkhan

11,925
2
24
27

Learner · Answer 5 · 2013-06-26T21:24:17.153

You do not need to replace the whole HTML with hover event. If your goal is to change the image on hover, use the attr method instead http://api.jquery.com/attr/:

HTML

<div class="secondcircle" id="circleone">
    <p>
        <img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
    </p>
</div>

jQuery

$("#circleone").hover(
  function () {
      $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
  },
  function () {
    $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
  }
);

Working JsFiddle here: http://jsfiddle.net/TBMxm/1/

Also, this is better from performance and best practice point of view.

Update1

jQuery Code if you want to use HTML method:

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function () {
      $('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
  },
  function () {
   $('#circleone p').html(originalContent);
  }
);

Working sample using HTML: http://jsfiddle.net/TBMxm/3/

score 1 · Answer 6 · answered Jun 26 '13 at 21:16

I noticed something weird when testing this. His original method does not work until I added a border around the parent div, then it works just fine.

Anyone know why that might be?

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/

.hover not working when used with .html

6 Answers6

Update1