How to do this effect of Hover?

Asked

Viewed 701 times

5

javascript css

  • I am voting to close this question because the effect mentioned by the AP should not even exist the page anymore, since it has been four and a half years since the question was asked and much has changed ad interim,

2 answers

11


This is done with CSS.

#menu .item4 a {
    border-top: solid 4px #2d8444;
    background: #2d8444;
    height: 0;
    display: block;
    margin-top: 0;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    padding: 0 21px;
}

#menu .item4 a:hover {
    height: 34px;
    color: #fff;
}

a {
    text-decoration: none;
    color: black;
}

a span {
	line-height: 30px;
    font-size: 20px;
}

li {
    list-style-type: none;
}

#menu li {
    list-style: none;
    margin: 0;
    background-color: #f0f0f0;
    height: 36px;
    width: 120px;
    font-family: "Arial", sans-serif;
    justify-content: "space-between";
}
<div id="menu">
    <ul>
        <li class="item4"><a href="/esportes"><span>Esportes</span></a></li>
    </ul>
</div>

The trick is to have the element a with zero height and change the value with :hover:

#menu .item4 a:hover{
    height:34px;
    color:#fff;
}

the element a changes the height with animation having the previously defined background color as in the example above.

The colored part that is on display when the height is 0 is the edge: 

border-top:solid 4px #2d8444;

In this example (here: https://jsfiddle.net/w4dd19xp/) you can see the bottom edge (in red) and the animation is even lighter.

4

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #f0f0f0;
  height: 36px;
  font-family: "Arial", sans-serif;
justify-content: "space-between";
}

.menu li {
  height: 0; 
  border-top: 3px solid;
  transition: all .2s ease-in-out;
width: 100%;
}

.menu li:nth-child(1) {
  border-color: red;
  background-color: red;
}

.menu li:nth-child(2) {
  border-color: yellow;
  background-color: yellow;
}

.menu li:nth-child(3) {
  border-color: green;
  background-color: green;
}

.menu li:nth-child(4) {
  border-color: blue;
  background-color: blue;
}

.menu li:nth-child(5) {
  border-color: purple;
  background-color: purple;
}

.menu li:hover {
  height: 34px;

}

.menu li:hover a {
  color: #fff;
}

.menu li a {
  padding: 0 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
  transition: all .2s ease-in-out;
  border-left: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
<ul class="menu">
  <li><a href="#"><span>item a</span></a></li>
  <li><a href="#"><span>item b</span></a></li>
  <li><a href="#"><span>item c</span></a></li>
  <li><a href="#"><span>item d</span></a></li>
  <li><a href="#"><span>item e</span></a></li>
</ul>

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.