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/

Answer 1

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

Answer 2

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

Answer 3

  $('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> 

Answer 4

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

  });
});