当指针离开并转到下一个链接太快时，在 onmouseleave 中调用的函数的转换不会完全执行

当鼠标指针进入链接时，onmouseenter 调用有效的函数，但是当鼠标指针离开链接并且离开得非常快时，onmouseleave 不会完全执行该函数，否则如果出去很慢，它会像它应该的那样执行

我尝试过使用鼠标悬停和鼠标输出，函数完全执行，但不断闪烁

function menuSlideOn(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.height = '24px';
              document.getElementById(element).style.margin = '0px 6px 0px 0px';
              setTimeout(function delay() {
                  document.getElementById(element).style.width = '120px';
				  document.getElementById(element).style.transform = 'skew(-30deg)';
              },
              120);
          }
          function menuSlideOf(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.width = '6px'
              setTimeout(function delay() {
                  document.getElementById(element).style.height = '10px';
                  document.getElementById(element).style.margin = '5px 6px 0px 0px';
				  document.getElementById(element).style.transform = 'skew(0deg)';
              },
              120);
          }

ul {
	list-style-type: none;
	margin: 10px;
    }
    li {
	margin: 10px;
	padding: 10px;
    }
    ul a {
	color: #333;
	text-decoration: none;
	text-indent: 20px;
	font-weight: bold;
	position: fixed;
    }
    .bullet {
	width: 6px;
	height: 10px;
	background: gray;
	float: left;
	margin-top: 5px;
	position: absolute;
    }

<ul>
                    <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
						<div id="d1" class="bullet">&nbsp;</div>
						<a href="">HTML</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
                        <div id="d2" class="bullet">&nbsp;</div>
						<a href="">CSS</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
                        <div id="d3" class="bullet">&nbsp;</div>
						<a href="">JavaScript</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
                        <div id="d4" class="bullet">&nbsp;</div>
						<a href="">Java</a>
                    </li>
                </ul>

我希望代码在悬停链接后应该将div 返回到初始状态，而不考虑鼠标指针的移动速度

实际结果取决于鼠标指针离开链接的速度

另一种解决方案是，如果您添加setTimeout()中的所有代码，则不会出现此问题;

function menuSlideOn(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.height = '24px';
    document.getElementById(element).style.margin = '0px 6px 0px 0px';
    
        document.getElementById(element).style.width = '120px';
        document.getElementById(element).style.transform = 'skew(-30deg)';
    },
    150);
}
function menuSlideOf(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.width = '6px'
    
        document.getElementById(element).style.height = '10px';
        document.getElementById(element).style.margin = '5px 6px 0px 0px';
        document.getElementById(element).style.transform = 'skew(0deg)';
    },
    150);
}

ul {
	list-style-type: none;
	margin: 10px;
    }
    li {
	margin: 10px;
	padding: 10px;
    }
    ul a {
	color: #333;
	text-decoration: none;
	text-indent: 20px;
	font-weight: bold;
	position: fixed;
    }
    .bullet {
	width: 6px;
	height: 10px;
	background: gray;
	float: left;
	margin-top: 5px;
	position: absolute;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="mouse_out.js"></script>
    <link rel="stylesheet" href="mouse_out.css">
</head>
<body>
    <ul>
        <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
            <div id="d1" class="bullet">&nbsp;</div>
            <a href="">HTML</a>
        </li>
        <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
            <div id="d2" class="bullet">&nbsp;</div>
            <a href="">CSS</a>
        </li>
        <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
            <div id="d3" class="bullet">&nbsp;</div>
            <a href="">JavaScript</a>
        </li>
        <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
            <div id="d4" class="bullet">&nbsp;</div>
            <a href="">Java</a>
        </li>
    </ul>
</body>
</html>

相关内容

最新更新

热门标签：