只有某個區域

Question

我有一個簡單菜單中的無序列表內顯示一個圖像：

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

當用戶懸停在立項，背景改變顏色，並且使用簡單的jQuery顯示IMG .toggle功能：

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

形象也紡紗由於一些CSS3動畫，因此類名rotateme，但我不認爲事情。

我的問題是，圖像顯示在其他任何東西之上，而我想只顯示它在li項目的範圍內（就像它本質上是背景圖像一樣）。我怎樣才能做到這一點？

此外，我怎樣才能擴展到多個列表項？

編輯：粗糙的JSFiddle示例here。如您所見，顯示整個圓圈。我只想顯示它位於灰色框內的位置。

Answer 1

.spinny { overflow: hidden; } 

是您最簡單的解決方案。除此之外，您必須在圖像上設置適當的大小，使其不大於列表項目。

在回答您的評論：

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