Javascript 当图像在ul li列表之外时，如何在css中旋转图像

这对其他人来说似乎很容易，但我无法理解。当鼠标悬停在

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>

您可以使用CSS执行此操作：

li > a:hover a > img {transform: rotate(7deg);}

当您将

li内的
a
悬停时，您的图像将旋转


旋转图像
旋转
{
变换：旋转（90度）；
}


旋转图像
旋转
{
变换：旋转（90度）；
}
这里有一个JS解决方案。正如我在评论中提到的，由于图像不在列表中，并且您在该列表中悬停的锚元素当然不是图像的兄弟姐妹或父元素，因此我认为不可能仅使用纯CSS根据标记中锚元素的悬停来定位图像


var els=document.getElementsByClassName（“项目”）；
对于（变量i=0；i

旋转{
变换：变换1s线性；
}
#旋转{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}

旋转图像
旋转
{
变换：旋转（90度）；
}
.图像
{
边缘顶部：10px；
}

在以下脚本中，将一个

a

元素悬停后旋转图像

它是如何工作的：

• 查找

  li中的所有
  a
  元素

• 在每个

  a

  元素中添加一个事件侦听器

  mouseover

• 当

  mouseover

  被触发时
• 获取要旋转的图像
• 在图像上应用css旋转，使其看起来是旋转的

var rotateImage=function（）{
//旋转图像添加css
var img=document.getElementById（'img'）；
img.classList.add（'rotate'）；
};
//找出所有a元素
var elms=document.querySelectorAll（'li>a'）；
对于（变量i=0，len=elms.length；i

。旋转{
变换：旋转（15度）；
}

您可以尝试使用JQuery解决方案，或者与green sock动画平台结合使用，该平台具有强大的浏览器支持，并且对于某些动画非常容易使用

var$box=$（'.item a'），
$image=$（“#image”）；
$box.hover(
函数（）{
TweenLite.至（$image，1{
轮换：360
});
},
函数（）{
TweenLite.至（$image，1{
轮换：0
});
}
);








不可能在
css
中以该图像为目标，但是使用
jQuery
可以按如下方式执行：


$（函数（）{
$（'#mylist li a'）。悬停（函数（）{
$（'#rotateImg'）。toggleClass（'rotate'）；
});
});
旋转{
变换：变换0.25秒；
}
.轮换{
-ms变换：旋转（180度）；/*IE 9*/
-webkit变换：旋转（180度）；/*铬合金、Safari、Opera*/
变换：旋转（180度）；
}








如果没有JavaScript，这将很棘手。事实上，我认为没有JS是不行的。。你愿意接受JS的回答吗？我就是这么想的，谢谢你的确认。如果你有任何JS的答案，请你分享，让我看看。谢谢你不用担心-检查我下面的答案..你能发布css并创建一个提琴吗？我认为这是可能的只是css。嗨，大卫，这是完美的。非常感谢你的帮助。很好，投反对票？请让我知道我错在哪里，因为我很高兴被纠正。嗨，大卫，我没有否决你的答案，因为我在之前的评论中说你的答案是完美的。@Flex无需担心-很高兴能帮助！我不能投票表决你的答案，因为它给了我错误的说法。。。“一旦你赢得了总共15个声誉，你的投票将改变所显示的公众形象。对不起，我真的不知道会发生什么。”我的坏消息是，只有当元素是insite同一个父元素时，这才有效。@davidWilkinson的JS解决方案非常适合您的项目。祝你好运