1

中央に30 * 30ピクセルの円がある透明な背景を持つ40 * 40ピクセルのpngがあります。

そのpngを単純なホバー効果のあるボタンとして使用したいのですが、透明な背景ではなく、カーソルが実際に円の上にあるときにのみホバー効果が発生するようにします。

このための単純な HTML+CSS ソリューションはありますか? ここや他のフォーラムで確認しようとしましたが、何も見つかりませんでした。

4

2 に答える 2

3

はい、HTML と CSS でこれを行うことができます。最初に円要素を作成し、画像の前に配置します。次に、次のように、画像と円の両方をコンテナーにラップします。

<div class="container">
  <div class="circle"></div>
  <img src="your-image.jpg" />
</div>

次に、 を使用position: absoluteして円を画像の上に配置し (画像内の円に合わせます)、+円がホバーされたときにセレクターを使用して次の隣接する要素を選択します。

.container {
  position: relative;
}
.circle {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #222;
}
.circle:hover+img {
  border: 5px solid aqua;
}

デモを参照してください。

于 2013-02-20T22:33:39.677 に答える
2

マウスが円の中にある場合（正方形の境界ボックスにはない場合）にのみホバー/クリックをアクティブにする必要がある場合は、このスクリプトを確認してくださいhttp://tympanus.net/codrops/2011/11/22/hover-and-click- trigger-circular-elements /

角が丸くレンダリングされている場合でも、すべての要素が長方形として扱われるため、CSSのみでは不可能です。

于 2013-02-21T00:20:37.523 に答える