1. The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.
2. The MouseLeave event is triggered only when the mouse pointer leaves the selected element.
Copy Code code as follows:
<div class= "Sel_box" >
<input type= "button" value= "Please select Department" id= "Sel_dept"/>
<div class= "Hide" id= "Sel_dept_sh" style= "Display:none"; >
<p>
<font> Shenzhen Co., Ltd. </font>
</p>
<p>
<font> Group Management </font>
</p>
</div>
</div>
<script type= "Text/javascript" >
$ (". Sel_box"). Click (Function (event) {
if (event.target.id = = ' sel_dept ') {
$ ("#sel_dept_sh"). Show (); Show dropdown box
$ ("#sel_dept_sh p Font"). Click (function () {
$ ("#sel_dept"). Val (');
var text = $ (this). text ();
alert (text);
$ ("#sel_dept"). Val (text). CSS ("Color", "#000");
$ ("#sel_dept_sh"). Hide ();
});
}else{
$ ("#sel_dept_sh"). Hide ();
}
});
$ (". Sel_box"). Bind ("MouseLeave", function () {///use MouseLeave to simulate the dropdown box effect
$ (this). Find (". Hide"). Hide ();
});
$ (". Sel_box"). Bind ("Mouseout", function () {//And mouseout is not, when will be triggered
$ (this). Find (". Hide"). Hide ();
});
</script>