Home/ Questions/Q 3624136
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:28:12+00:00

Im testing out something here,so please excuse the css rules.I have got a ul

  • 0

Im testing out something here,so please excuse the css rules.I have got a ul list in a div,and im trying to trigger a alert on the mouseout of the div but the alert triggers each time i mouseout the li items in the ul. Could some please tell me the reason behind it? I guess its something to so with bubbling but im not sure.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
#box{
cursor:pointer;width:300px;height:500px;background-color:#F1E0BB;
}

ul#myList{
list-style:none;padding-top:20px;
}

ul#myList li{
font-family:Arial;font-size:20px;font-weight:bold;height:40px;cursor:pointer;border:solid 1px #000;
}
</style>
</head>
<body>

<div id="box">
    <ul id="myList">
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
    </ul>
</div>


</body>
</html>

Jquery script i used

$('#box').mouseout(function(){

alert("ccc");

})
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the mouseleave event here instead, which doesn’t fire when leaving children:

    $('#box').mouseleave(function(){
  alert("ccc");
});

    You’re assumption about bubbling is correct, it’s those child elements bubbling up that’s triggering your handler. From the .mouseleave() docs:

    The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

    • 0