-1

I have an image that I want when I mouse over on it, an ul must be shown and when I leave the ul it must be close the ul.

HTML:

<img id="ro" src="setting.png" onmouseover="rotate()" style="width:20px;height:20px;border:none;"/>
<br />
<ul id="settings" style="position:fixed;" onmouseout="hj()">
  <li><a href="#">111</a></li>
  <li><a href="#">222</a></li>
  <li><a href="#">333</a></li>
  <li><a href="#">444</a></li>
</ul>

When I over mouse on the picture,the picture rotate 360 degrees and then show the ul.

JS:

function show(n) {
var tds = $("#settings li") ;
setTimeout(function(){ tds.eq(n).fadeIn(500); }, n*100);
}

And when I out mouse from the ul run this code:

function hj() {
var tds = $("#settings li");
for (var i = tds.length - 1; i > -1; i--) {
    hide(i) ;
}
}

And if I again hover mouse on the picture the picture rotate again and close the ul with this code:

function hide(n) {
var tds = $("#settings li");
setTimeout(function() { tds.eq(tds.length - n - 1).fadeOut(500); }, n*100);
}

But when the ul opened, when I go on the 3rd or 4th element(3rd or 4th li) the ul closed. where is it wrong?

defaude
  • 310
  • 1
  • 11
Emad Helmi
  • 43
  • 1
  • 5
  • exactly my problem is this when i out mouse from each li tag the list will be closed.although i dont leave the ul and still i am in the ul and just go from one li to another li – Emad Helmi Jul 06 '13 at 08:25
  • Hm... seems like you have two duplicate questions. Please see on of the [solutions](http://stackoverflow.com/a/17501264/2454376) in another question. – mishik Jul 06 '13 at 08:51

1 Answers1

0

The mouseout event bubbles. You should register the event programmatically with jQuery (also take a look at http://api.jquery.com/mouseleave/ instead) and / or cancel bubbling for the event inside your hj handler.

defaude
  • 310
  • 1
  • 11
  • can you give me the code? i dont undrestand what should i do.please give me the codes should i edit – Emad Helmi Jul 06 '13 at 08:56
  • Don't use the [DOM Level 0](https://en.wikipedia.org/wiki/DOM_events#DOM_Level_0) inline `on*="..."` attributes on HTML elements - especially when you're using jQuery in your site already. – defaude Jul 06 '13 at 09:12
  • You have your `hj` function registered as handler for the `mouseout` event on the `
      `. However, if you enter one of the `
    • ` elements and leave them again, there is also a `mouseout` event happening on them. It's just not doing anything because no handler is attached. **But** this event is "bubbling" which means it will also trigger `mouseout` event handlers on its parents up to the root element unless the bubbling is cancelled by one of the handlers. Look at [ppk's explanation](http://www.quirksmode.org/dom/events/mouseover.html).
     – defaude Jul 06 '13 at 09:24