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

CSS转换 - 将鼠标悬停在父级，效果子级上，将鼠标悬停在子级上

1 个答案: