How to change content of div on hover using JQuery/Javascript

Question

I\'m trying to change the contents of a div when it\'s hovered over using JQuery. I\'ve seen answers on stack overflow, but I can\'t seem to get it working.

I\'ve tried

Answer 1

You can target the div with jQuery, and store it's original value. On mouseout, you can restore it. Also using mouseenter reduces the number of times the logic processes as mouseover will fire for every mouse move over the element.

var $titleDiv = $('#titleDiv');

$("#imgDiv")
  .on('mouseenter', function() {
    $titleDiv.data('originalText', $titleDiv.text());
    $titleDiv.text('hovering');
  })
  .on('mouseout', function() {
    $titleDiv.text($titleDiv.data('originalText'));
  });

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

  
title