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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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