Question: I'm using jquery .hover function to show a list when your mouse enters a button. But when I try to put my mouse into this list and select some element, the list would disappear. I think that's because the .hover function is associated with the button instead of the list. So how could I associate the mouseover event with the button and the mouseleave event with the button and the whole list respectively?

Answer: 
You'll need to not use `.hover` and instead bind the mouseenter and mouseleave to the desired elements.

```
$(thelist).on("mouseleave",function(){
    // hide the list
});
$(thebutton).on("mouseenter",function(){
    // show the list
});

```
Use state variable that says if you should keep showing the list after moving mouse from button to the list.

Setting some timeout to the mouseover the list event will do the trick:

**HTML**

```
<input type="button" id="buttonId" value="hover" />
<ul id="list">
    <li>item1</li>
    <li>item2</li>
</ul>

```

**CSS**

```
#list {
    display: none;
}

```

**JavaScript**

```
var keepshowingList = false;
$('#buttonId').mouseover(function () {
    $('#list').show();
});
$('#buttonId').mouseleave(function () {
    setTimeout(function () {
        if (!keepshowingList) {
            $('#list').hide();
        }
    }, 150);
});
$('#list').mouseover(function () {
    keepshowingList = true;
});
$('#list').mouseleave(function () {
    keepshowingList = false;
    $(this).hide();
});

```

See example on [jsfiddle](http://jsfiddle.net/pybpQ/)