1

順序付けられていないリストに単純なメニューがあります。

<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の例はこちらです。ご覧のとおり、円全体が表示されています。灰色のボックス内のどこにあるかを表示したいだけです。

4

1 に答える 1

1 
.spinny { overflow: hidden; }

あなたの最も簡単な解決策です。それ以外は、リスト項目よりも大きくならないように、画像に適切なサイズを設定する必要があります。

あなたのコメントに応えて：

$(".spinny").hover(function(){
        $(this).find(".rotateme").toggle("fast");
});
于 2013-11-01T11:59:46.980 に答える