css - applying css3 translate property -


i applied translate property link. translate-y(-50px); on hover , works fine. when hover mouse on image reverse animation when first time hover on it translate y -50px problem when mouse off it again translate y -50px;

here code

.nav{    background-color:red;    padding:10px;    font-size:20px;    transition:0.5s all;    margin-top:80px;  }  .nav:hover{    transform:translatey(-50px);  }
<html>    <head></head>    <body>      <a href="#" class=nav>home</a>    </body>  </html>

add parent fix issue , apply translate style when hover on parent

.parent {    border: 1px solid green;    display: inline-block;  }  .nav {    background-color: red;    padding: 10px;    font-size: 20px;    transition: 0.5s all;    display:block;  }  .parent:hover .nav {    transform: translatey(-50px);  }
<div class="parent">    <a href="#" class=nav>home</a>  </div>


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -