仅在特定区域内显示图像

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示例here。如您所见，显示整个圆圈。我只是想把它显示在灰色框内。

Answer 1

.spinny { overflow: hidden; }

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

回应你的评论：

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