CODEWITHSUNDEEP
javascripthtmlcsshover
user7111196
user7111196

Reputation:

Menu drover effect when hover

I am creating a effect such that when u hover on .hoverarea class then .sociallink1,.sociallink2 and etc will be toggled like drover effect but my code is not working

And ther is also extra margin abhove each .sociallink1 and etc are geeting added automaticaly when i added only of 2px

following is my code

* {
  margin: 0;
  padding: 0;
}

.sociallink1 {
  background-color: blueviolet;
  cursor: pointer;
  width: 200px;
  height: 50px;
  color: white;
  text-align: center;
  font-size: 40px;
}

.sociallink2 {
  background-color: blueviolet;
  cursor: pointer;
  width: 200px;
  height: 50px;
  color: white;
  text-align: center;
  font-size: 40px;
  margin: 2px 0 0 0;
}

.sociallink3 {
  background-color: blueviolet;
  cursor: pointer;
  width: 200px;
  height: 50px;
  color: white;
  text-align: center;
  font-size: 40px;
  margin: 2px 0 0 0;
}

.sociallink4 {
  background-color: blueviolet;
  cursor: pointer;
  width: 200px;
  height: 50px;
  color: white;
  text-align: center;
  font-size: 40px;
  margin: 2px 0 0 0;
}

.sociallink5 {
  background-color: blueviolet;
  cursor: pointer;
  width: 200px;
  height: 50px;
  color: white;
  text-align: center;
  font-size: 40px;
  margin: 2px 0 0 0;
}

.container {
  margin: 100px 0 0 0;
}

.hoverarea {
  background-color: black;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  top: -50px;
  color: white;
  font-size: 40px;
  text-align: center;
  cursor: pointer;
}

.link1 {
  // position:relative;
  left: -200px;
}

.link2 {
  position: relative;
  left: -200px;
}

.link3 {
  position: relative;
  left: -200px;
}

.link4 {
  position: relative;
  left: -200px;
}

.link5 {
  position: relative;
  left: -200px;
}

.hoverarea:hover .link1 {
  // position:relative;
  left: 0;
  transition: 1s;
}
<div class="container">
  <div class="link1">

    <div class="sociallink1">Facebook </div>
    <div class="hoverarea">f</div>

  </div>
  <div class="link2">
    <div class="sociallink2">Google+ </div>
    <div class="hoverarea">G+</div>
  </div>
  <div class="link3">
    <div class="sociallink3">Instagram </div>
    <div class="hoverarea">I</div>
  </div>
  <div class="link4">
    <div class="sociallink4">Pinterest </div>
    <div class="hoverarea">P</div>
  </div>
  <div class="link5">
    <div class="sociallink5">Twitter </div>
    <div class="hoverarea">T</div>
  </div>


</div>

Upvotes: 1

Views: 69

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You're missing the "property" that you want to transition, in your case left.
I also changed your code a bit, making it compacter.

When using classes, try to optimize it so that you don't have 5 different classes, but just one (or two).

* {
  margin: 0;
  padding: 0;
}

.container {
  margin: 100px 0 0 0;
}

.link {
  background-color: blueviolet;
  cursor: pointer;
  width: 250px;
  height: 50px;
  left: -200px;
  color: white;
  text-align: center;
  font-size: 40px;
  padding-right: 50px;
  position: relative;
  box-sizing: border-box;
  margin-bottom: .5em;
}

.link>div {
  background-color: black;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
}

.link:hover {
  left: 0;
  transition: left 1s;
}
<div class="container">
  <div class="link">
    Facebook
    <div>f</div>
  </div>
  <div class="link">
    Google+
    <div>G+</div>
  </div>
  <div class="link">
    Instagram
    <div>I</div>
  </div>
  <div class="link">
    Pinterest
    <div>P</div>
  </div>
  <div class="link">
    Twitter
    <div>T</div>
  </div>
</div>

Upvotes: 2

Related Questions