castor4bit/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
      jQuery(function($) {
        // mouse event
        var box   = document.getElementById("box");
        var outer = document.getElementById("outer");
        outer.onmouseover = function(e) { box.style.display = "block"; msg("mouseover"); }
        outer.onmouseout  = function(e) { box.style.display = "none";  msg("mouseout");  }

        // bind event
        $(document).on("mouseleave", ".dummy", function() {
          // do nothing
        });

        // output message
        var idx = 0;
        var m = document.getElementById("message");

        function msg(s) {
          m.innerHTML = (++idx) +" : "+ s +"<br>" + m.innerHTML;
        }
      });
    </script>
    <style type="text/css">
      #outer {
        width: 100px;
        height: 50px;
        padding: 50px;
        background-color: red;
      }
      #inner {
        width: 100px;
        height: 50px;
        background-color: green;
      }
      #box {
        width: 50px;
        height: 50px;
        background-color: black;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
    <div id="box"></div>
    <p id="message"></p>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>test</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	jQuery(function($) {
	// mouse event
	var box = document.getElementById("box");
	var outer = document.getElementById("outer");
	outer.onmouseover = function(e) { box.style.display = "block"; msg("mouseover"); }
	outer.onmouseout = function(e) { box.style.display = "none"; msg("mouseout"); }

	// bind event
	$(document).on("mouseleave", ".dummy", function() {
	// do nothing
	});

	// output message
	var idx = 0;
	var m = document.getElementById("message");

	function msg(s) {
	m.innerHTML = (++idx) +" : "+ s +"<br>" + m.innerHTML;
	}
	});
	</script>
	<style type="text/css">
	#outer {
	width: 100px;
	height: 50px;
	padding: 50px;
	background-color: red;
	}
	#inner {
	width: 100px;
	height: 50px;
	background-color: green;
	}
	#box {
	width: 50px;
	height: 50px;
	background-color: black;
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="outer">
	<div id="inner"></div>
	</div>
	<div id="box"></div>
	<p id="message"></p>
	</body>
	</html>