javascript – 当它在ul li列表之外时,如何在css中旋转图像

2023年7月18日 196次阅读

对其他人来说似乎很容易,但我无法弄清楚.我想在悬停在li>上时旋转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>

最佳答案 这是一个JS解决方案.正如我的评论中提到的,由于图像在列表之外,并且您在该列表中悬停的锚元素当然不是图像的兄弟或父母,我认为不可能基于图像进行目标定位使用纯CSS将鼠标元素悬停在标记中.

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循环遍历每个列表项中的锚元素的每个实例,并向每个列表项添加事件侦听器(悬停和没有悬停).如果用户将鼠标悬停在锚元素上,则列表外的图像将旋转180度.一旦用户将鼠标移离锚元素,该类就被移除.

点赞