html - 如何调整链接到悬停事件的动画?
问题描述
我有一个由指向其他网站的导航链接组成的标题,其中一些链接通过下拉菜单显示。通过事件悬停,我添加了一个动画和样式,以查看您每时每刻的状态,并且在下拉的情况下,会显示所有选项。问题是,一旦显示了下拉菜单,我就向内部链接添加了与主要链接相同的样式和动画,但在动画的情况下,我总是在同一个地方有下划线,而不是在每个链接下方. 提前感谢您的时间和帮助。我给你留下了一个例子的链接,因为我现在使用所描述的行为
https://codepen.io/carlosurra/pen/YzqXjdP
我的模板
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false" >
<a class="nav-link menu-link-toggle" >PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item" @mouseover="serviceList = true" @mouseleave="serviceList = false">
<a class='nav-link menu-link menu-link-toggle' >SERVICES</a>
<ul class='dropdown-menu' v-if="serviceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">PRICES</router-link>
</li>
<li class="nav-item" @mouseover="contactList = true" @mouseleave="contactList = false">
<a class='menu-link nav-link menu-link-toggle' >CONTACT</a>
<ul class='dropdown-menu' v-if="contactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
我的 CSS
html, body {
background: #009050;
}
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
align-items: center;
}
.nav-item {
padding: 25px;
position: relative;
}
.nav-link:hover {
color: white;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
margin-top: 10px;
list-style: none;
position: absolute;
padding: 1em 1.25em 0.5em 0.75em;
background-color: white;
width: max-content;
box-shadow: 0px 14px 24px 0px rgba(0,0,0,0.21);
}
.dropdown-menu-item {
margin: 20px 0 20px 0;
}
.dropdown-menu-link {
font-size: 14px;
font-weight: bold;
color: red;
text-decoration: none;
}
.head {
font-size: 14px;
color: red;
font-weight: bold;
text-decoration: none;
}
.nav-item:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 35%;
background: white;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.nav-item:hover:before,
.nav-item:focus:before {
visibility: visible;
transform: scaleX(1);
}
.dropdown-menu-link:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 0%;
background: #D53865;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.dropdown-menu-link:hover:before,
.dropdown-menu-link:focus:before {
visibility: visible;
transform: scaleX(1);
}
.added {
display: none;
}
解决方案
请将此添加到您的代码中
.dropdown-menu-link {
padding-bottom:3px;
position:relative;
}
.dropdown-menu-item {
position:relative;
}
将代码更改 bottom:30%;
为bottom: 0px;
.dropdown-menu-link:before {
bottom: 0px;
}
推荐阅读
- c++ - 在 C++ 中,在 lambda 中捕获“*this”
- php - 通过谷歌登录无法在时间戳之前处理令牌
- javascript - 如何在文本字段中设置光标的位置?
- java - 使用递归的几何级数(Java)
- matlab - 如何提高这个 Matlab 代码的运行速度?
- ios - Evernote bootstrap 在 Evernote 中国 印香笔录中不起作用
- python-3.x - KeyError:“纬度”
- html - 如何在单个范围滑块中创建多个光标?
- python - 为什么我在每行的开头得到 b' 而在每行的末尾得到 '?
- excel-formula - 根据条件返回值列表 - Excel