jQuery Hover event is not bound to the child element

Question

I bind the hover event to the `li` tag(see my code below or fiddle, for code details), i.e. when i hover over the `li`, i added the class which changes the background of the `li`. `li` tag is having one `a` tag which encloses two `span` tags with texts, when i hover over the two text `span` tags, i am not seeing the hover event is executed. Please see my fiddle http://jsfiddle.net/shmdhussain/JbVMv/ . Thanks in advance for any help. ``` Untitled Page

Accepted Answer

The `.hover()` jQuery function takes two arguments, the function to be executed at `hover` (mouseenter) and the function to be executed at `hover out` (mouseleave). You should use that instead of `mouseleave`

```
groupTab.hover(function () {
        if (!($(this).children("a").hasClass("current"))) {
            $(this).siblings("li").children("a").removeClass("hoverBG");
            $(this).children("a").addClass("hoverBG");
        }
    }, function () {
        $(this).children("a").removeClass("hoverBG");
    });
```

DEMO

jQuery Hover event is not bound to the child element

Solution

Problem