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 use jQuery's .hover() function along with the .text() function to do what you want. Also, no need for document.getElementById:

$("#imgDiv").hover(
  function() {
    $("#titleDiv").text("hovering");
  },
  function() {
    $("#titleDiv").text('title');
  }
);

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

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

  
title