Question

How do I select a list item that has a CSS hover pseudo-class using jquery?

for example,

        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
       </ul>

       <style>
               ul li:hover
               {
                  background-color: black;
               }
       </style>

jquery code does not work, alert message is not displayed

       $("ul li:hover").click(function()
       {
              alert("test");                   
       });

Question:

Am I selecting the active hover state correctly in the jquery code above? And if not, what is the correct way to select it?

Answer 1

The way you try it cannot work, as the Event-handler will only be bound to items that are hovered in exact the milliseconds the code is executed.

You will need something like this:

$("ul li").click(function() {
    if ($(this).is(':hover')) alert('test');
});

Demo: http://jsfiddle.net/TimWolla/3mdpG/