Question

I can’t get this simple .replaceWith() to co-operate with a .hover(). Would appreciate some help.

I want it the text to change to EXPAND when I hover on it, and go back to SHOWS when I mouseout. I can get the text to change to EXPAND, but I can’t get the text to go back to the original, SHOWS.

The JSFiddle code for anyone kind enough to have a look.

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').replaceWith('<h2>Expand</h2>');
      }, 
      function () {
        $('#shows').replaceWith('<h2>Shows</h2>');
      }
    );
});

Answer 1

The problem is when you’re replacing it it’s losing the id attribute. So although the mouseout function of the hover() event fires it can’t find the element #shows.

Try this instead:

// Change H1 text to "EXPAND" when hovered on, and go *back* to "SHOWS" when the mouse leaves

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').text('Expand');
      },
      function () {
        $('#shows').text('Shows');
      }
    );
});

You should always use .text() or .html() in examples like this because acctually all you want to do is change the inner bit the TEXT or the HTML contained within the <h2> tag, rather than the whole element.

If you want to use replaceWith:

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').replaceWith('<h2 id="shows">Expand</h2>');
      },
      function () {
        $('#shows').text('<h2 id="shows">Shows</h2>');
      }
    );
});