3

查看这个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;
}
4

1 回答 1

5

#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;
  ...
于 2013-07-05T02:38:42.723 回答