CODEWITHSUNDEEP
jquerymouseover
JamesTBennett
JamesTBennett

Reputation: 2311

mouseover an element

How come I can't do this?

if($('.element').mouseover() == true)
{
}
else
{
}

I want to know when the mosue is over a element if isn't do something else.

Here is the full code that now works. I got rid of the if statement...

$('.product_image').hover(function(){
  var image = $(this).attr('class');
  image = '.' + image.substring(14);
  $(image).fadeIn();
});
$('.product_disc').mouseleave(function(){
  $('.product_disc').fadeOut();
});

Upvotes: 0

Views: 234

Answers (5)

partkyle
partkyle

Reputation: 1458

I use this pattern a lot:

$('.element').mouseenter(function() {
    $(this).addClass('hover');
}).mouseleave(function(){
    $(this).removeClass('hover');
});

Now you can use the is method to see if the mouse is over the element.

There is a reason to use mouseenter vs mouseout - it has to do with nested elements. You can see that here

Upvotes: 2

Trufa
Trufa

Reputation: 40717

Here is a working example:

http://www.jsfiddle.net/mSkx5/1/

This uses the hover function of jQuery.

Good luck!

EDIT: here is a working example with mouseover

http://www.jsfiddle.net/mSkx5/2/

Upvotes: 0

Jan Aagaard
Jan Aagaard

Reputation: 11184

The syntax that jQuery uses is different that what would normally write. Their tag line used to be something like "it will change the way you write JavaScript code". You have to use mouseover() like this:

$('.element').mouseover(function() {
    // Use $(this) to access the element where the mouse is entering.
}).mouseout(function() {
    // Use $(this) to access the element where the mouse is exiting.
});

Also note the similar mouseenter() and mouseleave() methods. Se the official documentation here: http://api.jquery.com/mouseover/.

Upvotes: 0

kobe
kobe

Reputation: 15835

one more latest one..which is elagent to use

$(".element").hover(
  function () {
   //this is mouseover
  }, 
  function () {
   //this is mouseout
  }
);

Upvotes: 0

user534312
user534312

Reputation: 91

$(".element").mouseenter(function() {

    alert('Mouse over the element');

}).mouseleave(function() {

    alert('Mouse out');

});

Upvotes: 0

Related Questions