私は自分のウェブサイトでこの効果を達成しようとしていますが、その方法に困惑しています。私の目標は、マウスをその上に置くと単色（不透明度.8など）とアイコン（および/またはテキスト）が上に表示される画像を持つことです。注: 私の画像もレスポンシブになるように設定されているため、問題が発生するかどうかはわかりません。例>>下のリンクをクリックし、左側のコンピューターをクリックして、一番下までスクロールすると、私の目標に似たホバー効果を持つ 9 つの円が表示されます。 http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825
どんな指示、チュートリアル、アドバイスも大歓迎です!
この種の効果にはいくつかのオプションがあり、特定のユースケースに依存する場合があります。opacityCSS3 プロパティを使用して要素の をアニメーション化する、適切に劣化した CSS のみを採用できますtransition。サポートしているブラウザー、IE9+ や chrome、FF などの最新のブラウザーでのみアニメーション化されます。
-> このjsfiddleを参照してください
それ以外の場合は、jQuery などの JavaScript ライブラリを使用する必要があります。またはと を.fadeToggle()または.fadeIn()およびと.fadeOut()組み合わせて適用する。これは、古い IE ブラウザのサポートが削除された v2 より前の jQuery ライブラリを選択すると思う限り、クロスブラウザで動作するはずです。(これはテストしていません)。JS ソリューションを使用すると、または代わりに使用しているアニメーションを簡単に変更したり、またはその逆を使用して他のより多様なアニメーションを変更したりすることもできます。.hover().mouseenter().mouseleave().slideToggle.show(500)$(element).animate({'opacity': 1, 'height' : 100%'}, slow);
したがって、同一のマークアップを使用する JS ソリューションは、この fiddleのようなものになります。
jQuery リファレンス: