如何调整链接到悬停事件的动画？

Posted 2023-03-06

【中文标题】如何调整链接到悬停事件的动画？

【英文标题】：How to adjust animation linked to a hover event?

【发布时间】：2020-12-01 01:44:47

【问题描述】：

我有一个由指向其他网站的导航链接组成的标题，其中一些链接通过下拉菜单显示。通过事件悬停，我添加了一个动画和样式，以查看您每时每刻都在做什么，并且在下拉的情况下，会向您显示所有选项。问题是，一旦显示了下拉菜单，我就向内部链接添加了与主要链接相同的样式和动画，但在动画的情况下，我总是在同一个地方有下划线，而不是在每个链接下方.提前感谢您的时间和帮助。我给你留下了一个例子的链接，因为我现在已经使用所描述的行为了

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;

【参考方案1】：

请将此添加到您的代码中

.dropdown-menu-link 
   padding-bottom:3px;
   position:relative;

.dropdown-menu-item 
   position:relative;

更改代码 bottom:30%; 为 bottom: 0px;

.dropdown-menu-link:before 
    bottom: 0px;

请检查此代码笔： https://codepen.io/Rayeesac/pen/LYNpyEx

【讨论】：

查看答案@javascript110899

【参考方案2】：

将position: relative 添加到.dropdown-menu-item 并将正确的位置设置为.dropdown-menu-item:before 的底部，假设为0px；

或者，如果您想相对于链接集 position: relative 到 .dropdown-menu-link。