需要帮助搞清楚css悬停动画

Question

我试图将虚线圈旋转360度进行1次计数，同时将鼠标悬停在3个内衬的菜单图标上。如果可能的话，我想用css和html来做这件事。这就是我所得到的，我似乎无法弄明白。 stackoverflow新手，刚刚添加了代码段

＆＃13;

＆＃13;

body {
  background-color: black;
  padding: 10px;
}
#container {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 220px;
  height: 220px;
  //border: 1px solid white;
}
#dashed {
  width: 200px;
  height: 200px;
  border: 10px dashed white;
  border-radius: 50%;
}

#menuIcon {
  position: absolute;
  top: 75px;
  left: 42.5px;
  width: 136px;
}
 #top {
  margin: 0px 0px 15px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
 #mid {
  margin: 0px 0px 0px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
#bottom {
  margin: 15px 0px 0px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
#menuIcon:hover #dashed {
  animation: spin .8s 1;
}
@keyframes spin {
  transform: rotate(360deg);
}

＆＃13;

<div id="container">
  <div id="dashed"></div>
  <div id="menuIcon">
    <div id="top"></div>
    <div id="mid"></div>
    <div id="bottom"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为了捕捉悬停在不同元素上的元素，你需要添加'〜'或'+'

body {
  background-color: black;
  padding: 10px;
}
#container {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 220px;
  height: 220px;
  //border: 1px solid white;
}
#dashed {
  width: 200px;
  height: 200px;
  border: 10px dashed white;
  border-radius: 50%;
}

#menuIcon {
  position: absolute;
  top: 75px;
  left: 42.5px;
  width: 136px;
}
 #top {
  margin: 0px 0px 15px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
 #mid {
  margin: 0px 0px 0px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
#bottom {
  margin: 15px 0px 0px 0px;
  width: 135px;
  height: 15px;
  background-color: white;
}
#menuIcon:hover + #dashed {
  -webkit-animation: spin 0.8s 1;
}
@-webkit-keyframes spin {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(360deg);

}

    <div id="container">
      <div id="menuIcon">
        <div id="top"></div>
        <div id="mid"></div>
        <div id="bottom"></div>
      </div>
      <div id="dashed"></div>
    </div>