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 :) /

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/xsv325ef/

• javascript
• jquery

• Can you put that on jsFiddle, Codepen ect... – EugenSunic Commented Apr 19, 2015 at 0:36
• @esc sure i can, just one second – adoion Commented Apr 19, 2015 at 0:38
• Are menu items li? – DrKey Commented Apr 19, 2015 at 0:43
• Why don't you try it separately outside the hover function and please put the jsfiddle/codepen whatever – EugenSunic Commented Apr 19, 2015 at 0:47
• 1 Now it's clear you forget to add }); on the last line to close your $(document.ready()) function. – kavare Commented Apr 19, 2015 at 1:00

4 Answers 4

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

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

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

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

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

<script src="https://ajax.googleapis./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>

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

  });
});