用原生JS写关于鼠标移入移出ul的二级菜单问题，怎么都实现不了效果

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用原生JS写关于鼠标移入移出ul的二级菜单问题，怎么都实现不了效果相关的知识，希望对你有一定的参考价值。

原效果在这个网址查看 http://www.orangebank.com.cn/ 用原生JS如何写这个效果

这个功能其实使用hover伪类即可实现，不需要js

给你一个思路，将子元素设置为默认display:none;不可见。当鼠标移动到父元素的菜单列表时，激活子元素为display:block;可见状态。

具体代码需要使用到hover伪类，例子如下。

<html>
<body>
<div class="menu">
    <em>我是一级菜单</em>
    <div class="menu_sub">
        <p>我是二级折叠菜单</p>
    </div>
</div>
<style>
    .menu_sub
        display:none;

    .menu:hover > .menu_sub
        display:block;

</style>
</body>
</html>

参考技术A https://pan.baidu.com/s/1o8HSBPo
查看即可。参考技术B 你是求一份正确代码？追问

嗯嗯，我自己写了样式但是代码太多。。无法提交

参考技术C 发你的代码呀，你发图鬼知道你出了什么问题追问

老哥，不是我不想发。。字数太多不允许提交问题

追答

你发压缩包啊

追问

只能发图片，它不让发压缩包啊。。

鼠标悬浮_鼠标移入/移出触发函数

1、关键代码

1.1、原生

鼠标经过（:hover）

.rotate_enlarge {
	border-left: 30px solid #0000ff;
    border-top: 30px solid #ff0000;
    border-right: 30px solid #00ff00;
    border-bottom: 30px solid #FFFF00;
    border-radius: 10%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: transparent;
}

.rotate_enlarge:hover {
    transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
}

鼠标移入移出事件

let rotateEnlarge = document.getElementById('rotateEnlarge');
rotateEnlarge.onmouseover = function () {
	console.log('鼠标移入旋转放大元素');
};
rotateEnlarge.onmouseout = function () {
    console.log('鼠标移出旋转放大元素');
};

1.2、vue

鼠标经过（:hover）

.mouseover_mouseleave {
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
	background-color: #ff0000;
	color: #333;
}

.mouseover_mouseleave:hover {
	background-color: #0000ff;
	color: #eee;
}

鼠标移入移出事件

// 移入
mouseOver() {
	this.msg = "";
	clearTimeout(this.times);
	this.msg = "鼠标移入";
},
// 移出
mouseLeave() {
	this.msg = "鼠标移出";
	this.times = setTimeout(() => {
		this.msg = "";
	}, 1000);
},