Results 1 to 3 of 3

Thread: onmouseout not working with nested tags

  1. #1
    Join Date
    Jun 2014

    onmouseout not working with nested tags

    I am trying onmouseout and onmouseover events. Below code is working fine if i remove tags, what is confusing me is , with tags, only mouseover is firing and not mouseout. Please guide what i am doing wrong.

    <!DOCTYPE html>
    <div onmouseout="mouseout();" onmouseover="mouseover();" id="test"><h1> Mouse </h1> </div> 
    <div id="count"> </div>
    <div id="count2"> </div>
    var textonout = "<h1>Mouse out</h1>";
    var count =0;
    var out = 0;
    var textonover = "<h1>Mouse Over</h1>";
    function mouseout() {
    document.getElementById("test").innerHTML = textonout;
    document.getElementById("count2").innerHTML = out++;
    function mouseover() {
        document.getElementById("test").innerHTML = textonover;
        document.getElementById("count").innerHTML = count++;
    In my case, onmouseout event doesnt fire if i have nested tags. I have tried the same code just replacing h1 tag with a div tag. I tried several combination (using span etc) as soon as i introduce any tag inside my first div, onmouseout stops working.

    I am not specifically looking for how to get it work, i just want to understand the cause of issue . I have tried it on Firefox, IE10 and it behaves the same way.

  2. #2
    Join Date
    Sep 2007
    I am trying this code:
    <!DOCTYPE html>
    <style type="text/css">
    #test { width:200px; height:33px; padding:10px; font-size:19px; text-align:center;background-color:#129; color:white;}
    #mytable {position:absolute; left:10px; top:100px; width:220px; height:70px; font-size:19px; text-align:center; }
    #count1 { width:100px;height:50px; color:blue; background-color: turquoise; }
    #count2 { width:100px; height:50px; color:sandybrown;  background-color:#ada; }
    <div onmouseout="mouseout()" onmouseover="mouseover()" id="test">Mouse</div> 
    <table id="mytable"><tr><th>over</th><th>out</th></tr>
    <tr><td id="count1"></td><td id="count2"></td></tr>
    <script type="text/javascript">
    var textonout = "Mouse out";
    var count = 0;
    var out = 0;
    var textonover = "Mouse Over";
    var el = document.getElementById("test");
    var c1 = document.getElementById("count1");
    var c2 = document.getElementById("count2");
    function mouseout() {
    el.innerHTML = textonout;
    c2.innerHTML =  ++out;
    function mouseover() {
    el.innerHTML = textonover;
    c1.innerHTML =  ++count;

  3. #3
    Using innerHTML reflows the document, when a reflow occurs any pseudostates are generally reset, so it can't "out" because it's no longer "over".

    ... another reason innerHTML is supposed to be a relic of the past and not used anymore.

    Of course, without using SECTION your use of H1 is gibberish... if you are declaring multiple VAR you only need to say VAR once, then comma delimit them. You've got the right idea grabbing and storing the values before the script runs, but I'd put it into an anonymous function to restrict their scope.

    "Good" scripting should hook elements, not be hooked by them which is why the onevent attributes really should have gone the way of the dodo ages ago. I'd also suggest creating a few simple functions to do things like flush child nodes, add child nodes in a neutral manner, and replace nodes. Likewise I'd probably be targeting child span for JUST the part that needs replacing, instead of replacing tags. Get the tags in the markup and leave them where they are.

    Which would go a little something like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	content="text/html; charset=utf-8"
    <style type="text/css" media="screen,projection,tv">
    #test {
    	padding:0.25em 0.5em;
    	JavaScript Mouse Event Test
    <h1>JavaScript Mouse Event Test</h1>
    	Hover the box below to change it's text and increase the corresponding counter.
    <h2 id="test">Mouse <span id="state"></span></h2>
    <div>Number of <code>mouseover</code>: <span id="countOver">0</span></div>
    <div>Number of <code>mouseout </code>: <span id="countOut">0</span></div>
    <script type="text/javascript"><!--
    (function(d) {
    		test = d.getElementById('test'),
    		state = d.getElementById('state'),
    		spanCountOver = d.getElementById('countOver'),
    		spanCountOut = d.getElementById('countOut'),
    		countOver = 0,
    		countOut = 0;
    	function eventAdd(e, event, handler) {
    		if (e.addEventListener) e.addEventListener(event, handler, false);
    			else e.attachEvent('on' + event, handler);
    	function flush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	function nodeAdd(e, node) {
    		e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
    	function nodeReplace(e, node) {
    		nodeAdd(e, node);
    	eventAdd(test, 'mouseover', function(e) {
    		nodeReplace(state, 'Over');
    		nodeReplace(spanCountOver, ++countOver);
    	eventAdd(test, 'mouseout', function(e) {
    		nodeReplace(state, 'Out');
    		nodeReplace(spanCountOut, ++countOut);
    That's pretty much what you are trying to do, right?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center