只有某个区域

我有一个简单菜单中的无序列表内显示一个图像：只有某个区域

<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。如您所见，显示整个圆圈。我只想显示它位于灰色框内的位置。

来源

2013-11-01 ElendilTheTall

u能提供的jsfiddle与演示？ – IProblemFactory

为什么你不证明它不是CSS3动画而不是*假设* this？很容易做到：评论他们，并给它一个测试！ – gvee

@gvee证明_what_不是CSS3动画？ – ElendilTheTall

.spinny { overflow: hidden; }

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

在回答您的评论：

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

来源

2013-11-01 11:59:46 RobH

非常感谢。任何想法如何我可以复制这个多个列表项目？我想我需要包括每个列表项旁边的图像，但如果它们都具有相同的类名称，那么切换将对它们起作用... – ElendilTheTall

@ElendilTheTall - 为您添加了一个编辑（未经测试但应该没问题） – RobH

完善。你是凡人中的神。 – ElendilTheTall

只有某个区域

回答

相关问题