CSS转换-悬停在父对象上、效果子对象上、悬停在子对象上

请查看我当前的实现

<div id="menu">
  <a href="#" class="left"><p>Left</p></a>
  <a href="#" class="right"><p>Right</p></a>
  <a href="#" class="top"><p>Top</p></a>
  <a href="#" class="bottom"><p>Bottom</p></a>
  <div id="icon">
    <p class="icon-text">Hover over me</p>
  </div>
</div>

在指向菜单子项的任何位置，简单地添加一个

#菜单>a

：

例如：

#menu > a.left {
  top: 26.5%;
  left: 5%;
  height: 80px;
  width: 150px;
  z-index: -1;
  transition:left 0.7s;
  -webkit-transition:left 0.7s;
  -moz-transition: left 0.7s;
}

#menu > a.left:hover {
  left: -100px;
}

对于其他3个元素，依此类推

此外，为了防止进一步的问题，请更具体地使用选择器，因此不要使用

a {
  position: absolute; /* this is not good, target globally every single anchor */
  text-decoration: none;
   ...

使用：

a {
  position: absolute; /* this is not good, target globally every single anchor */
  text-decoration: none;
   ...

#menu > a {
  position: absolute;
  text-decoration: none;
  ...