css - 需要帮助找出 css 悬停动画

Question

我试图让虚线圆旋转 360 度，同时将鼠标悬停在 3 行菜单图标上。如果可能的话，我想只用 css 和 html 来做到这一点。这就是我所拥有的，我似乎无法弄清楚。stackoverflow 的新手，刚刚添加了片段

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);
}

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

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>