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

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

• javascript
• mouseover

• 2 Change click to mouseover? – Farhad Jabiyev Commented May 1, 2014 at 12:56
• 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 Commented May 1, 2014 at 13:07
• .hover() function accepts two function arguments, one for mouseenter event and one for mouseleave event. – Farhad Jabiyev Commented May 1, 2014 at 13:09
• Thanks! @FarhadJabiyev I'll read up more on that. – Geeky Gaj Commented May 1, 2014 at 13:14

5 Answers 5

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

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

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

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

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