Check if element is hovered over in jQuery

Question

How can one check if the cursor is hovered over in jquery or js.

I have tried $('#id').is(':hover') but this doesnt seem to be working at all.

I have to mention that i am calling this line inside of a hover() function could this maybe be the problem?

here is my code:

$(document).ready(function() { 

    /* On hover function, over the menu items */
    $('nav ul li').hover(function(){
        $('nav ul li').css("background-color", "");
        $('#append').css("background-color", "");
        $(this).css("background-color", "#9999FF"); 
        $('#append').css("background-color", "#9999FF"); 

        var append;
        if($('#menu-item-12')) {
            append = 'news';
        }else if($('#menu-item-9:hover')) {
            append = 'account';
        }else if($('#menu-item-11').is(':hover')) {
            append = 'check out';
        }
        $('#appendp').empty();
        $('#appendp').append(document.createTextNode(append));

    });

Hope someone can tell me whats wrong.

here is jsfiddle link, i did my best :) https://jsfiddle.net/xsv325ef/

Why don't you try it separately outside the hover function and please put the jsfiddle/codepen whatever — EugenSunic, Apr 19 '15 at 00:47
Are you trying to do something along these lines? http://jsfiddle.net/3ype31sp/1 — Jared Farrish, Apr 19 '15 at 00:50
Now it's clear you forget to add `});` on the last line to close your `$(document.ready())` function. — kavare, Apr 19 '15 at 01:00
The better way for doing this kind of checks is in [this post](http://stackoverflow.com/questions/8813051/determine-which-element-the-mouse-pointer-is-on-top-of-in-javascript), please have a check and you'll get it. — kavare, Apr 19 '15 at 01:13

score 4 · Answer 1 · answered Apr 19 '15 at 00:55

A nice way to do it is to store the related texts into an Object literal,
and recall the text depending on the hovered element ID:

fiddle demo

$(function() { // DOM ready shorthand ;)

    var $appendEl = $('#appendp');
    var id2text = {
        "menu-item-12" : "unlock this crap",
        "menu-item-9"  : "check your gdmn account",
        "menu-item-11" : "check the hell out"
    };

    $('nav ul li').hover(function(){
        $appendEl.text( id2text[this.id] );
    });

});

Regarding the colors... use CSS :hover

This is a perfect answer! – EugenSunic Apr 19 '15 at 01:10 — EugenSunic, Apr 19 '15 at 01:10

Said Kholov · Accepted Answer · 2018-05-14T01:52:17.853

3

You just need to check if hovered item has this id.

Something like this: https://jsfiddle.net/hrskgxz5/5/

 if(this.id === 'menu-item-11') {
     append = 'check out';
     alert('hovered');
 }

edited May 14 '18 at 01:52

answered Apr 19 '15 at 00:47

Said Kholov

2,436
1
15
22

thanks a lot, works perfectly, do you know maybe why my method failed? – adoion Apr 19 '15 at 01:00
there is no point of checking if an item is hovered. there is an event "on('mouseover')". You never check that item is clicked like (if item.is('click')), same goes for hover. – Said Kholov Apr 19 '15 at 01:08

score 1 · Answer 3 · answered Apr 19 '15 at 00:53

1

 $('li').hover(function(){
      $(this).css("background-color", "#9999FF");          
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

answered Apr 19 '15 at 00:53

Isaac Stevens

29
2

I hope this helps understand how to hover logic works – Isaac Stevens Apr 19 '15 at 00:53

kavare · Answer 4 · 2015-04-19T01:04:16.407

You should notice that jQuery .hover() function takes 2 handler function, and here you only provide one. Check the official documentation here.

In your case, you may just use .mouseover() to add a class on top of it, and then set your styles in css file. (Document here)

For example:

$(document.ready(function(){
  $('nav ul li').mouseover(function() {
    $(this).addClass('active');
  });
});

If you do need to toggle the class for that element, the hover function should be as follow:

$(document.ready(function(){
  $('nav ul li').hover(function() {
    // Stuff to do when the mouse enters the element
    $(this).addClass('active');

    // Other styles you want to do here
    // ...

  }, function() {
    // Stuff to do when the mouse leaves the element
    $(this).removeClass('active');

    // Other styles you want to remove here
    // ...

  });
});

Edit:

As I found out, jQuery .hover() function DO accept single handler. In that case, you'll have to let the class toggle inside:

$(document.ready(function(){
  $('nav ul li').hover(function() {
    // Stuff to do when the mouse enters the element
    $(this).toggleClass('active');

  });
});

Check if element is hovered over in jQuery

4 Answers4

Edit: