i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.
what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).
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>
You should apply the transition
to the element, not its hover state. With transition
you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.
Then use the :hover
selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.
Also avoid using inline styles when possible.
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>
If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom
and makes sure to use box-sizing: border box
so your element will remain the same size when the border gets added.
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>