javascript - 仅在特定区域内显示图像

Question

我在无序列表中有一个简单的菜单：

<ul class="courses">
   <a href="#">
     <li class="spinny">
        <h3>Course Title</h3>
        <img class="rotateme" src="images/logo_transparent.png"/>
     </li>
   </a>
</ul>

当用户将鼠标悬停在 li 项目上时，背景会改变颜色并使用简单的 jQuery .toggle 函数显示 img：

$(".spinny").hover(function(){
            $(".rotateme").toggle("fast");
});

由于一些 CSS3 动画，图像也在旋转，因此类名 rotateme，但我认为这并不重要。

我的问题是图像显示在其他所有内容之上，而我只想在 li 项目的范围内显示它（就好像它本质上是背景图像一样）。我怎样才能做到这一点？

另外，如何将其扩展到多个列表项？

编辑：这里的粗略 JSFiddle 示例。如您所见，显示了整个圆圈。我只想显示它位于灰色框内的位置。

Answer 1

.spinny { overflow: hidden; }

是您最简单的解决方案。除此之外，您必须在图像上设置适当的大小，使其不大于列表项。

回应您的评论：

$(".spinny").hover(function(){
        $(this).find(".rotateme").toggle("fast");
});