导航栏下划线悬停动画

问题描述 投票：0回答：5

我正在尝试制作一个悬停动画，当鼠标悬停在其上方时会出现下划线。

我可以添加什么来实现这一目标？我尝试了预制的，但没有用。它显示一条线出现，但不在导航栏文本下方，而是在网站本身下方（屏幕底部）。

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hover-nav {
  background-color: tomato;
}

#logo {
  margin-left: 30px;
  margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
      <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
      <li style="float: right;"><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

html css
5个回答
2
投票

试试这个代码，我在你的CSS代码上标记了我的编辑。

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


/*Edit starts here*/
li {
  position:relative;
}

li::after {
    content: '';
    display: block;
    width: 0;
    position:absolute;
    left:50%;
    height: 2px;
    background: #0077ff;
    transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover::after {
    width: 80%;
    left: 10%;
}

li {
  transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover {
  background-color: tomato;
}

/*Edit ends here*/

#logo {
  margin-left: 30px;
  margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;"><a href="">კონტაქტი</a></li>
      <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
      <li style="float: right;"><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

0
投票

您应该将 

transition
应用于元素，而不是其悬停状态。使用 
transition
，您可以告诉元素在发生任何变化时如何表现。在这种情况下，所有样式（易于过渡）都会持续 0.3 秒，并具有缓入速度曲线。

然后使用 

:hover
选择器来指示需要进行哪些更改。因此，在这种情况下，更改背景颜色并向文本添加下划线。

还应尽可能避免使用内联样式。

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  li a:hover {
      background-color: tomato;
      text-decoration: underline;
  }
<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>

如果您打算在框的底部而不是文本上应用下划线，您可以使用 

border-bottom
并确保使用 
box-sizing: border box
，以便在添加边框时您的元素将保持相同的大小。

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
    height: 100px;
  }

  li a:hover {
      background-color: tomato;
      border-bottom: 1px solid white;
  }
<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>

0
投票

将 

text-decoration:underline
添加到您的 
li:hover
代码中，如下所示...

li a:hover {
  text-decoration:underline;
}
0
投票

HTML 代码 无效 您在 

<a>
中添加了 
<ul>
部分，而没有 
<li>
标签

<ul>
  <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

更改为

<ul>
  <li><a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a></li>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

在 CSS 中编辑：

ul {      
  width:100%;
  display: flex;
  align-items: center;
}
li {
  width:100%; // remove padding and add to `li a`.
}
li a{
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
li a:hover { // instead of .hover-nav
  background-color: tomato;
  border-bottom:4px solid #fff;
}
// remove #logo margin

工作演示

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width:100%;
  background-color: #333;
  height: 100px;
  display: flex;
  align-items: center;
}

li {
  width:100%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 1.5px;
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

li a:hover {
  background-color: tomato;
  border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href=""><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></a></li>
      <li class="hover-nav"><a href="">კონტაქტი</a></li>
      <li><a href="">ჩვენს შესახებ</a></li>
      <li><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

0
投票

对不起，我也尝试了这些代码，但是，输出是出现在整个导航栏行而不是屏幕中的效果。不是我想要的那样。请帮助找到正确的方法，因为我厌倦了在这里复制确切的代码，但仍然做同样的事情

这是我的 HTML 


nav-item
<div class="navbar-nav me-auto p-3 p-lg-2"> 
    <a href="index.html" class="nav-item col-lg-1 nav-link active">Home</a>
    <a href="about.html" class="nav-item col-lg-1 nav-link">About</a>
    <a href="service.html" class="nav-item col-lg-1 nav-link">Services</a>
和CSS


</div>
.nav-item::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform-origin: bottom right;
transition: transform 0.4s ease-out;
transform: scaleX(0);
}
.nav-item:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.