CSS转换-悬停在父项上，影响子项，悬停在子项上

Question

查看这个jsfiddle以了解我当前的实现。

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

我有一个父div，当我将鼠标悬停在它上面时，它会移动一些子项并显示它们。然而，当我将鼠标悬停在子项上时，我想显示更多的子项，但浏览器仍然认为我只是将鼠标悬停于父项上。

有什么想法吗？

有问题的CSS：

body {
  background-color: #8bd8f4;
  height: 100%;
  width: 100%;
}
#menu {
  position: absolute;
  top: 25%;
  left: 43%;
  height: 210px;
  width: 210px;
  border-radius: 100%;
  border:7px solid #333;
  background-color: #8bd8f4;
  cursor: pointer;
  transition:all 0.7s;
  -webkit-transition:all 0.7s;
  -moz-transition: all 0.7s;
}
#menu:hover a.left {
  left: -15%;
}
#menu:hover a.right {
  right: -15%;
}
#menu:hover a.top {
  top: -15%;
}
#menu:hover a.bottom {
  bottom: -15%;
}
#icon {
  position: absolute;
  left: 4.5px;
  top: 4.5px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #333;
  color: #8bd8f4;
  text-align: center;
}
p.icon-text {
  position: relative;
  font-size: 22px;
  font-family: 'Open Sans', Sans-Serif;
  font-weight: bold;
  text-transform: uppercase;
  top: 30%;
}
a {
  position: absolute;
  text-decoration: none;
  color: #8bd8f4;
  background-color: #333;
  text-transform: uppercase;
  padding: 10px;
  font-size: 18px;
  font-family: 'Open Sans', Sans-Serif;
  font-weight: bold;
  text-align: center;
  border-radius: 25%;
}
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;
}
a.left:hover {
  left: -100px;
}
a.right {
  top: 26.5%;
  right: 5%;
  height: 80px;
  width: 150px;
  z-index: -1;
  transition:right 0.7s;
  -webkit-transition:right 0.7s;
  -moz-transition: right 0.7s;
}
a.right:hover {
  right: -100px;
}
a.top {
  top: 5%;
  left: 26%;
  width: 80px;
  height: 150px;
  z-index: -1;
  transition:top 0.5s;
  -webkit-transition:top 0.5s;
  -moz-transition: top 0.5s;
}
a.top:hover {
  top: -100px;
}
a.bottom {
  bottom: 5%;
  left: 26%;
  width: 80px;
  height: 150px;
  z-index: -1;
  transition:bottom 0.7s;
  -webkit-transition:bottom 0.7s;
  -moz-transition: bottom 0.7s;
}
a.bottom:hover {
  bottom: -100px;
}

Answer 1

只要指向菜单子菜单，就简单地添加一个#menu > a：

http://jsbin.com/asewup/1/edit

示例：

#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;
   ...

用途：

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