Change DIV content on mouse-over

Question

I have an existing script i've been using for content display. Currently it works when you click on a link. Is it possible to modify it to work on mouse-over instead of a click.

Here is my fiddle:

HTML:

<a href="#" id="1"><div class="block"></div></a>
<a href="#" id="2"><div class="block"></div></a>
<a href="#" id="3"><div class="block"></div></a>

<div class="content"></div>

JavaScript:

$( document ).ready(function() {
    $('#1').click(); 
});

$('#1').click(function() {
  $('.content').html('This is a text example 1');
});

$('#2').click(function() {
  $('.content').html('This is a text example 2');
});

$('#3').click(function() {
  $('.content').html('This is a text example 3');
});

Thanks @FarhadJabiyev, now i feel stupid. That was easy. But a google search has confused me. When do we use .mouseover and .hover ? — Geeky Gaj, May 01 '14 at 13:07
`.hover()` function accepts two function arguments, one for `mouseenter` event and one for `mouseleave` event. — Farhad Jabiyev, May 01 '14 at 13:09

score 4 · Accepted Answer · edited May 23 '17 at 12:14

Just change click() to mouseover();.

You can also use mouseenter(). See the link for more explanation (link).

DEMO

$( document ).ready(function() {
    $('#1').mouseover(); 
});

$('#1').mouseover(function() {
  $('.content').html('This is a text example 1');
});

$('#2').mouseover(function() {
  $('.content').html('This is a text example 2');
});

$('#3').mouseover(function() {
  $('.content').html('This is a text example 3');
});

score 1 · Answer 2 · answered May 01 '14 at 12:58

Yes. Replace click() with mouseover()

 $( document ).ready(function() {
   $('#1').click(); 
 });

 $('#1').mouseover(function() {
  $('.content').html('This is a text example 1');
});

$('#2').mouseover(function() {
  $('.content').html('This is a text example 2');
 });
 $('#3').mouseover(function() {
  $('.content').html('This is a text example 3');
});

score 1 · Answer 3 · answered May 01 '14 at 13:01

You can just replace click() with mouseover():

$( document ).ready(function() {
$('#1').mouseover(); 
});

$('#1').mouseover(function() {
$('.content').html('This is a text example 1');
});

$('#2').mouseover(function() {
$('.content').html('This is a text example 2');
});

$('#3').mouseover(function() {
$('.content').html('This is a text example 3');
});

score 0 · Answer 4 · edited May 23 '17 at 10:27

Yes, just replace .click() with .hover() or .mouseover() (See the difference between hover and mouseover):

$( document ).ready(function() {
    $('#1').click(); 
});

$('#1').hover(function() {
  $('.content').html('This is a text example 1');
});

$('#2').hover(function() {
  $('.content').html('This is a text example 2');
});

$('#3').hover(function() {
  $('.content').html('This is a text example 3');
});

Here you can see how it works on Jsfiddle

score 0 · Answer 5 · answered May 01 '14 at 13:09

Your code has some deprecated functions issue and shows error if use latest version of jQuery (SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead)

Change it to:

$(document).ready(function() {
    $('#1, #2, #3').mouseover(function(evt) {
        $('.content').html('This is a text example' + evt.currentTarget.id);
    });
});

Change DIV content on mouse-over

5 Answers5