如何解决悬停菜单项
帮我实现一个悬停菜单。 底线是,当悬停在菜单项上时,红色圆圈会平滑地接近悬停项。当光标离开该点时,圆会平滑地上升到其坐标。 预先感谢。
nav{
position: relative;
}
.circle{
height: 10px;
width: 10px;
display: inline-blick;
background-color: red;
border-radius: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.menu{
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
.menu li{
cursor: pointer;
}
<nav>
<div class="circle"></div>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
解决方法
此脚本的工作方式:
获取<li>
中的所有id="menu"
项,并将它们分别设置为mouseover
和mouseout
的“事件监听器”
将鼠标悬停在<li>
元素上时,脚本将从顶部和高度开始移动其位置。这些坐标以内联样式传递到#circle
元素。
当鼠标光标从mouseout
元素中移至<li>
时,将删除内联样式,并且红点将返回其原始位置。
您可以从CSS transition: 0.8s;
var menu = document.getElementById('menu');
var li = menu.getElementsByTagName('li');
var dot = document.getElementById('circle');
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("mouseover",function () {
setAnimation(this);
});
li[i].addEventListener("mouseout",function () {
dot.setAttribute('style','');
});
}
function setAnimation(el) {
var pos = el.offsetTop;
var h = el.offsetHeight;
dot.setAttribute('style','top:' + (pos + h / 2) + 'px;');
}
nav {
position: relative;
}
#circle {
height: 10px;
width: 10px;
display: inline-blick;
background-color: red;
border-radius: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
transition: 0.8s;
}
#menu {
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
#menu li {
cursor: pointer;
}
<nav>
<div id="circle"></div>
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
,
您可以通过几种方法来执行此操作。我在下面创建了一些方法。您也可以在给定的代码中添加动画。
我正在考虑div <div class="circle"></div>
并非必须放置在<ul>
标签
function chbg(elem,color) {
elem.firstChild.style.backgroundColor=color;
}
var circle = '<div class="circle" style="background-color: red;"></div>';
var menu = document.getElementsByClassName('menu2')[0];
for (var i = 0; i < menu.children.length; i++) {
menu.children[i].addEventListener("mouseout",function () {
this.innerHTML =this.innerHTML.replaceAll(circle,'')
});
menu.children[i].addEventListener("mouseover",function () {
if(this.innerHTML.indexOf(circle)==-1)
this.innerHTML =this.innerHTML+circle
});
}
nav{
position: relative;
}
.circle{
float:left;
height: 10px;
width: 10px;
display: inline-blick;
border-radius: 50px;
top: 50%;
left: 0;
}
.menu,.menu2,.menu3{
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
.menu3 li:before {
opacity:0;
content: '';
background-color: red;
float:left;
height: 10px;
width: 10px;
display: inline-blick;
border-radius: 50px;
top: 50%;
left: 0;
}
.menu3 li:hover:before{
opacity:1;
}
<h1>method 1 using javascript</h1>
<nav>
<ul class="menu">
<li onmouseover="chbg(this,'red')" onmouseout="chbg(this,'white')"><div class="circle"></div>Menu 1</li>
<li onmouseover="chbg(this,'white')"><div class="circle"></div>Menu 2</li>
<li onmouseover="chbg(this,'white')"><div class="circle"></div>Menu 3</li>
</ul>
</nav>
<h1>method 2 using javascript</h1>
<nav>
<ul class="menu2">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
<h1>method 3 using CSS</h1>
<nav>
<ul class="menu3">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。