Could help me to resolve mouse events?

<script>
var theNumOfWins;
var part;

theNumOfWins = 0;

    function openWindow(){      
        part = partOfWindow("outlayer",theNumOfWins,"section0");
        setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");

        part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
        setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");

        part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
        setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","move","1px solid red");

        document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[2].value;
        theNumOfWins++;
    }



    function partOfWindow(name,theNumOfWins,parent){
        var id;
        var css;
        var idAndCSS;
        var tag;
        var att;
        id = name + "Id" + theNumOfWins;
        css = name + "CSS";
        tag = document.createElement("div");
        tag.setAttribute("id",id);
        tag.setAttribute("class",css);
        document.getElementById(parent).appendChild(tag);
        idAndCSS = {
            tag: tag,
            id: id,
            css: css
        }
        return idAndCSS;
    }

    function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
        var i;
        var cssPart;
        cssPart = document.getElementsByClassName(className);
        document.getElementById("1").innerHTML = cssPart.length;
        document.getElementById("2").innerHTML = cssPart[0];
        document.getElementById("3").innerHTML = cssPart[1];
        document.getElementById("4").innerHTML = cssPart[2];
        for(i=0; i < cssPart.length; i++){
        cssPart[i].style.zIndex = zIndex;
        cssPart[i].style.width = width;
        cssPart[i].style.height = height;
        cssPart[i].style.backgroundColor = backgroundColor;
        cssPart[i].style.position = position;
        cssPart[i].style.left = left;
        cssPart[i].style.top = top;
        cssPart[i].style.cursor = cursor;
        cssPart[i].style.border = border;
        }
    }


</script>

Hi!!! I need help!!!

I made a object of "div".

and then I added one more "div" into first "div".

second "div" is a red box. You can see it when you click the "+"mark.

But, second "div" has mouse event, and the event does not work.

I want to change mouse cursor when cursor become on the red box.

Why does not the mouse event work?

My last purpose is to make window object.

And there will be a lot of mouse events.

I already made window object similar to this one. However, it also did not work.

How can I try mouse event?

This is my full source: https://drive.google.com/file/d/0B4p8lZSEMXcqZUdacVJyVlBiUWc/view?usp=sharing

Solution

This is a CSS issue. Your problem is here:

part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");

Specifically, where you set the z-index to -1, by doing so you place the div and everything contained in it under the active layer so to speak. As such the hover event doesn't propagate to your div. change this to 1 and the cursor will behave as expected.

		var theNumOfWins;
		var part;
		
		theNumOfWins = 0;
			
			function openWindow(){		
				part = partOfWindow("outlayer",theNumOfWins,"section0");
				setCSS(part.css,"1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
				
				part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
				setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
				
				part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
				setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","pointer","1px solid red");
			
				document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[1].value;
				theNumOfWins++;
			}
		
			
			
			function partOfWindow(name,theNumOfWins,parent){
				var id;
				var css;
				var idAndCSS;
				var tag;
				var att;
				id = name + "Id" + theNumOfWins;
				css = name + "CSS";
				tag = document.createElement("div");
				tag.setAttribute("id",id);
				tag.setAttribute("class",css);
				document.getElementById(parent).appendChild(tag);
				idAndCSS = {
					tag: tag,
					id: id,
					css: css
				}
				return idAndCSS;
			}
			
			function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
				var i;
				var cssPart;
				cssPart = document.getElementsByClassName(className);
				document.getElementById("1").innerHTML = cssPart.length;
				document.getElementById("2").innerHTML = cssPart[0];
				document.getElementById("3").innerHTML = cssPart[1];
				document.getElementById("4").innerHTML = cssPart[2];
				for(i=0; i < cssPart.length; i++){
				cssPart[i].style.zIndex = zIndex;
				cssPart[i].style.width = width;
				cssPart[i].style.height = height;
				cssPart[i].style.backgroundColor = backgroundColor;
				cssPart[i].style.position = position;
				cssPart[i].style.left = left;
				cssPart[i].style.top = top;
				cssPart[i].style.cursor = cursor;
				cssPart[i].style.border = border;
				}
			}

		#buttonToOpenWindow{
			width:50px;
			height:20px;
			border: 1px solid #DCDCDC;
			margin: 2px;
			position:fixed;
			left:-1px;
			top:0px;
		}
		#buttonToOpenWindow div.positionOfPlus{
			width:20px;
			height:20px;
			position:absolute;
			left:30px;
		}
		div.wrapOfPlus{
			width:20px;
			height:20px;
		}
		div.inside01{
			width:15px;
			height:5px;
			background-color: #B0C4DE;
			position:absolute;
			left:2.5px;
			top:7.5px;
			}
		div.inside02{
			width:5px;
			height:15px;
			background-color: #B0C4DE;
			position:absolute;
			left:7.5px;
			top:2.5px;
		}

	<section id="section0">
		<div id="buttonToOpenWindow" onclick="openWindow()">
			<div class="positionOfPlus">
			<div class="wrapOfPlus">
			<div class="inside01"></div>
			<div class="inside02"></div>
			</div>
			</div>
		</div>
	</section>

	<footer>
		<br><br><br><br><br>
		<div style="display:inline-flex;">00:&emsp;<div id="0"></div></div><br>
		<div style="display:inline-flex;">01:&emsp;<div id="1"></div></div><br>
		<div style="display:inline-flex;">02:&emsp;<div id="2"></div></div><br>
		<div style="display:inline-flex;">03:&emsp;<div id="3"></div></div><br>
		<div style="display:inline-flex;">04:&emsp;<div id="4"></div></div><br>
		<div style="display:inline-flex;">05:&emsp;<div id="5"></div></div><br>
		<div style="display:inline-flex;">06:&emsp;<div id="6"></div></div><br>
		<div style="display:inline-flex;">07:&emsp;<div id="7"></div></div><br>
		<div style="display:inline-flex;">08:&emsp;<div id="8"></div></div><br>
		<div style="display:inline-flex;">09:&emsp;<div id="9"></div></div><br>
		<div style="display:inline-flex;">10:&emsp;<div id="10"></div></div><br>
		<div style="display:inline-flex;">11:&emsp;<div id="11"></div></div><br>
		<div style="display:inline-flex;">12:&emsp;<div id="12"></div></div><br>
		<div style="display:inline-flex;">13:&emsp;<div id="13"></div></div><br>
		<div style="display:inline-flex;">14:&emsp;<div id="14"></div></div><br>
		<div style="display:inline-flex;">15:&emsp;<div id="15"></div></div><br>
		<div style="display:inline-flex;">16:&emsp;<div id="16"></div></div><br>
		<div style="display:inline-flex;">17:&emsp;<div id="17"></div></div><br>
		<div style="display:inline-flex;">18:&emsp;<div id="18"></div></div><br>
		<div style="display:inline-flex;">19:&emsp;<div id="19"></div></div><br>
		<div style="display:inline-flex;">20:&emsp;<div id="20"></div></div><br>
		<div style="display:inline-flex;">21:&emsp;<div id="21"></div></div><br>
		<div style="display:inline-flex;">22:&emsp;<div id="22"></div></div><br>
		<div style="display:inline-flex;">23:&emsp;<div id="23"></div></div><br>
		<div style="display:inline-flex;">24:&emsp;<div id="24"></div></div><br>
		<div style="display:inline-flex;">25:&emsp;<div id="25"></div></div><br>
		<div style="display:inline-flex;">26:&emsp;<div id="26"></div></div><br>
		<div style="display:inline-flex;">27:&emsp;<div id="27"></div></div><br>
		<div style="display:inline-flex;">28:&emsp;<div id="28"></div></div><br>
		<div style="display:inline-flex;">29:&emsp;<div id="29"></div></div><br>
		<div style="display:inline-flex;">30:&emsp;<div id="30"></div></div><br>
		<div style="display:inline-flex;">111:&emsp;<div id="111"></div></div><br>
		<div style="display:inline-flex;">222:&emsp;<div id="222"></div></div><br>
		<div style="display:inline-flex;">333:&emsp;<div id="333"></div></div><br>
		<div style="display:inline-flex;">444:&emsp;<div id="444"></div></div><br>
		<div style="display:inline-flex;">555:&emsp;<div id="555"></div></div><br>
		<div style="display:inline-flex;">666:&emsp;<div id="666"></div></div><br>
		<div style="display:inline-flex;">777:&emsp;<div id="777"></div></div><br>
		<div style="display:inline-flex;">888:&emsp;<div id="888"></div></div><br>
		<div style="display:inline-flex;">999:&emsp;<div id="999"></div></div><br>
		</footer>