可以帮我解决鼠标事件吗？

Question

<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>

您好!!!我需要帮助!!!

我做了＆＃34; div＆＃34;。

的对象

然后又添加了一个＆＃34; div＆＃34;进入第一个＆＃34; div＆＃34;。

第二＆＃34; div＆＃34;是一个红色的盒子。单击＆＃34; +＆＃34;标记时可以看到它。

但是，第二个＆＃34; div＆＃34;有鼠标事件，事件不起作用。

当光标变为红色框时，我想更改鼠标光标。

为什么鼠标事件不起作用？

我的最后目的是制作窗口对象。

并且会有很多鼠标事件。

我已经制作了与此类似的窗口对象。但是，它也没有用。

如何尝试鼠标事件？

这是我的完整资料来源：https://drive.google.com/file/d/0B4p8lZSEMXcqZUdacVJyVlBiUWc/view?usp=sharing

Answer 1

这是一个CSS问题。你的问题在这里：

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

具体来说，在将z-index设置为-1的情况下，通过这样做，可以将div及其中包含的所有内容放在活动层下。因此，悬停事件不会传播到您的div。将其更改为1，光标将按预期运行。

		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>