javascript - 当图像不在 ul li 列表中时，如何在 css 中旋转图像

Question

这对其他人来说似乎很容易，但我无法弄清楚。当悬停在 li > a 上时，我想旋转 ul 列表之外的图像。提前谢谢你。

<div class="container">               
     <ul id="mylist" data-angle="all">
          <li class="item"><a href="#home">A</a></li>
          <li class="item"><a href="#home">B</a></li>
          <li class="item"><a href="#home">C</a></li>
          <li class="item"><a href="#home">D</a></li>
          <li class="item"><a href="#home">E</a></li>
     </ul>
     <a href="#link" class="button">
          <img src="~/assets/logo/compass.png" />
     </a>
</div>

Answer 1

这是一个 JS 解决方案。正如我在评论中提到的，由于图像在列表之外，并且您在该列表中悬停的 anchor 元素当然不是图像的 sibling 或父元素，我认为不可能基于图像仅使用纯 CSS 悬停标记中的 anchor 元素。

var els = document.getElementsByClassName("item");
for(var i = 0; i < els.length; i++) {
  var btnImg = document.getElementById("rotateImg");
  els[i].addEventListener("mouseover", function() {
    btnImg.className += " rotate";
  }, false);
  els[i].addEventListener("mouseout", function() {
    btnImg.classList.remove("rotate");
  }, false);
}

#rotateImg {
  transition: transform 1s linear;
}
#rotateImg.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

<div class="container">               
     <ul id="mylist" data-angle="all">
          <li class="item"><a href="#home">A</a></li>
          <li class="item"><a href="#home">B</a></li>
          <li class="item"><a href="#home">C</a></li>
          <li class="item"><a href="#home">D</a></li>
          <li class="item"><a href="#home">E</a></li>
     </ul>
     <a href="#link" class="button">
          <img id="rotateImg" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRs5uw4irxGko9F06bx4-M7T8eka0R0PK79NAj2rigANKGhQs_BGwAvZg0" />
     </a>
</div>

上面的 JS 循环遍历每个列表项中 anchor 元素的每个实例，并为每个添加事件监听器(悬停和非悬停)。如果用户将鼠标悬停在 anchor 元素上，列表外的图像将旋转 180 度。一旦用户将鼠标从 anchor 元素移开，该类就会被删除。