Javascript onMouseCenter事件在div元素上不起作用

我正在设计的网页的一部分由几个并排放置的

div

元素组成。每一个都包含一个图像。当用户的鼠标进入div时，我想调用一个下拉菜单。但是，用一个简单的“print hello”函数测试它并没有得到我期望的结果

在这一点上，图像被正确地放置，并且它们的大小被调整，就像我指定的那样。但是，光标不是

指针

，并且当鼠标进入div时，

测试

功能不会运行。我过去遇到过单击事件的问题，我总是试图找到解决方法。有人能解释为什么它不起作用吗

这是html

#容器{
背景色：黑色；
边界半径：20px；
显示：内联块；
位置：固定；
宽度：100%；
z指数：2；
排名：0；
}
#图标{
背景颜色：白肋木；
边界半径：继承；
边界半径：20px；
}
#菜单a{
字体大小：30px；
字体系列：“Arial”；
颜色：白色；
文字装饰：无；
左边距：50像素；
}
#旗{
宽度：50px；
高度：50px；
}
#菜单a：悬停{
颜色：#e55d00；
}
身体{
高度：2000px；
背景图片：url（“background.jpg”）；
}
#btt{
底部：0；
颜色：白色；
位置：固定；
文字装饰：无；
}
#包含{
显示：内联块；
高度：1000px；
宽度：100%；
最大宽度：100%；
位置：绝对位置；
}
#副菜单{
宽度：0；
身高：100%；
z指数：1；
背景色：黑色；
过渡：宽度1s；
填充顶部：200px；
位置：固定；
排名：0；
左：0；
溢出x：隐藏；
}
#副菜单a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
#侧菜单a：悬停{
颜色：红色；
}
#语言{
左边距：250%；
}
#标题a{
颜色：#e55d00；
文字装饰：无；
}
#头衔{
字体大小：50px；
文本对齐：居中；
边界半径：20px；
显示：内联块；
填充：10px；
}
#计划{
利润上限：200px；
}
#当前{
宽度：210px；
高度：200px；
光标：指针；
}
#当前img{
宽度：继承；
身高：继承；
}
#进展{
左边距：200px；
宽度：210px；
高度：200px；
光标：指针；
}
#进展img{
宽度：继承；
身高：继承；
}

项目
功能菜单（）{
var menu=document.getElementById（“侧菜单”）；
menu.style.width=“400px”；
}
函数hideMenu（）{
var menu=document.getElementById（“侧菜单”）；
menu.style.width=“0”；
}
功能测试（）{
console.log（“你好”）；
}

您好，请看下面的提琴。我使用

警报来做这件事，但是您可以使用
控制台来做同样的事情。log
希望对您有所帮助


还添加了一个小提琴与下拉列表上可见的鼠标输入事件你想做什么，我想是这样的

您好，请看下面的提琴。我使用
警报执行此操作，但您也可以使用
控制台执行此操作。log
希望对您有所帮助


还添加了一个小提琴与下拉列表上可见的鼠标输入事件你想做什么，我想是这样的

最后，将包含图像的
div
的位置设置为
绝对值
解决了问题。我还不明白为什么，但我相信这与css文件中指定的
z-index
值有关。如果有人能解释为什么问题是这样解决的，我将不胜感激。
最后，将包含图像的
div
的位置设置为
绝对值
解决了问题。我还不明白为什么，但我相信这与css文件中指定的
z-index
值有关。如果有人能解释为什么问题是这样解决的，我将不胜感激。
您的控制台是否返回任何错误？没有错误或任何结果。工作正常：-有时控制台需要一秒钟来显示内容。您使用的浏览器和版本是什么？@raphael75我使用的是最新版本的chrome。我正在webstorm中编写代码。您的控制台是否返回任何错误？没有错误或任何结果。工作正常：-有时控制台需要一秒钟来显示内容。您使用的浏览器和版本是什么？@raphael75我使用的是最新版本的chrome。我正在webstorm中编写代码。