悬停时菜单驱动器效果

Question

我正在创建一种效果，当您将鼠标悬停在.hoverarea上时，.sociallink1，.sociallink2等会像drover效果一样切换，但我的代码无效

而且，当我仅添加.sociallink1

时，每个2px等等的额外边距也是自动添加的。

以下是我的代码

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的案例left中，您错过了要转换的“财产” 我也改变了你的代码，使其更紧凑。

使用类时，尝试对其进行优化，这样就不会有5个不同的类，只有一个（或两个）。

* {
  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>