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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
  <div id="titleDiv">title</div>
</div>

Answer 2

You need to try like this

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

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}
#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

<div id=titleDiv>title</div>

</div>

Answer 3

First of all, replace $("imgDiv") with $("#imgDiv") to get the element with id (#) imgDiv.

Then $("tdiv") doesn't exist, you probably mean $("div") to select a <div>tag in your DOM.

And finally, $("tdiv").textContent doesn't exist. You can try $("div").html() or $("div").text() to get the <div> tag content

--

Quick reminder : jQuery documentation on selectors

$("div") will select the <div> tags

$(".element") will select tags with class="element"

$("#element") will select tags with id="element"

Answer 4

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

  <div id="titleDiv">title</div>

</div>

Answer 5

You cannot call reference a dom with pure Javascript and them manipulate it with jQuery - it will not work.

Try this:

$( "#imgDiv" ).mouseover(function() {
      $("#titleDiv").text("hovering");     
});

The titleDiv id has to be referenced in your code using "#", then the id name.

Also, use $("#name_of_id").text("your content") instead of .textContent()

Answer 6

Easy solution,

var s = document.getElementsByTagName('div');
function out() {
 s[0].innerHTML = 'hello';
}

function ibn() {
 s[0].innerHTML = 'Myname';
}

<div onmouseout = 'out()' onmouseenter = 'ibn()'> Myname </div>