タグ

マウスオンに関するHOSOIToshiyaのブックマーク (2)

  • [CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル

    ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか? 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基的な例を見てください。

  • [CSS]マウスのフォーカスで、画像の上にアイコンを表示するスタイルシート

    画像にマウスをフォーカスすると、画像の上にアイコンを表示するスタイルシートをJanko At Warp Speedから紹介します。 Add zoom icon to images using CSS (and jQuery, of course) demo アイコンを表示する仕組みは、画像の上に空spanを配置し、hover時に「display:block;」を適用するものです。 また、空spanを最初から配置しない代わりに、スクリプト(jQuery)を使用し、フェードのアニメーションを伴ってアイコンを表示するサンプルも紹介されています。 demo(下段)

  • 1