javascript - 将鼠标悬停在列表下拉列表上时旋转图像，并在鼠标悬停时旋转回来

Question

简短摘要:

将鼠标悬停在下拉列表上时，我还想旋转列表项旁边的箭头。

https://jsfiddle.net/v08gxczo/

长总结:

我有一个导航栏元素列表，其中包含一个下拉列表，该下拉列表具有右指向的 svg。

悬停“下拉”元素时，颜色会发生变化，只要悬停，下拉菜单就会一直存在。我很乐意 transform: rotate(xdeg) 也悬停在这个列表上和列表中，除非我在 try catch 它时遇到了麻烦。它看起来有点像这样(snippit + fiddle):

ul {
  display:flex;
  list-style:none;
}
img {
  padding-left:10px;
}
li {
  margin: auto 20px;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5 s ease;
  display: none;
  background - color: #0c0c0c;
  padding: 1em 0 0 1em;
  border-radius: 5px;
}

ul li ul li {
  padding: 0 0 0.5em 0;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}


ul li ul li {
  clear: both;
  width: 100%;
}

<ul>
  <li><a>item 1</a></li>
  <li><a>item 1</a></li>
  <li><a>item 1</a><img src="https://image.flaticon.com/icons/svg/32/32213.svg" alt="right-arrow" style="height:10px"/>
    <ul>
      <li><a>child 1</a>
      </li>
      <li><a>child 1</a>
      </li>
      <li><a>child 1</a>
      </li>
    </ul>
  </li>
</ul>

具体来说，突出显示的下拉列表发生在这里:

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

而且我不确定我将如何合并悬停以保持元素在悬停的同时旋转。

我试过这个:

ul li:hover>ul,
ul li ul:hover {
  transform: rotate(10deg);
}

但是阅读该代码，只有它会轮换列表才有意义，我确实这样做了。

我看得越多，就越难理解如何只用 CSS 做到这一点。即使在 javascript 中，这似乎也很痛苦(将事件监听器添加到打开列表，然后在鼠标移出时将鼠标悬停在其上以添加或删除类。

也许有我看不到的解决方案？

Answer 1

据我了解，当您将鼠标悬停在 list 上时，您想对 image 产生效果。 当像这样悬停而不是你的尝试时，你可以影响 image 的旋转:

ul li:hover img {
  transform: rotate(90deg);
}

这是一个简单的答案，因为我不知道这是否正是您想要做的。请让我知道。