ホバー時にコンテンツを表示します (カードの高さには影響しません)

ホバー時に表示されるコンテンツを含むブロックがあります。効果の動作方法は次のとおりです。 .hoverCard は、デフォルトで基礎となるコンテンツを表示します (.hoverCard__showOnHover のコンテンツは非表示になります)。 ユーザーが .hoverCard の上にマウスを移動すると、.hoverCard__showOnHover がそのコンテンツを表示し、.hoverCard__body が上に遷移します (「開いた状態」になります)。効果) 上記の視覚効果はデモで確認できますが、アニメーションを完全に動作させることはできません。会いました

P粉289775043 2024-03-27 20:29:28 0  1  437

画像の開始点と終了点

画像の開始点と終了点を設定しようとしています。それで、キャンバスと画像があり、画像をキャンバスに配置すると、開始点/終了点の上にマウスを置いたときに小さな赤い円が点灯するようにしたいのですが、これは他の画像を接続して作成できることを意味します。例: 1) 画像をドラッグします。 2) 画像をキャンバスに配置します。 3) マウスを開始点/終了点に移動すると、小さな赤い点が点灯します。ご覧のとおり、赤い点はホバー時にのみ表示されます。もう 1 つの質問ですが、最初の質問を解決できれば、画像がグリル (正方形) に従っていません。これは html/js のコンストレジスタの例です。

P粉511757848 2023-08-31 12:24:51 0  1  569

Vue トランジションのトランジション遅延を削除するにはどうすればよいですか?

Vue を使用して、マウスを画像の上に置くとテキスト ボックスが上に移動してフェードインするようにアニメーション化しています。アニメーションは正しいですが、開始するまでにわずかな遅延があります。画像をホバーするとテキスト ボックスがスムーズにフェードインし、上に移動し始めるようにしたいと考えています。テキスト ボックスは適切にフェードアウトし、カーソルが離れると下に移動します。テンプレート:`{{バッジ[アイテム].説明}}`、メソッド:{hoverStart(i){this.hoveredIndex=i;}、

P粉757432491 2023-08-17 17:36:49 0  1  503

JavaScript はサムネイルから全幅の画像ページへのスムーズな移行を実装します

http://manifesto.clapat.com/ ホーム ページ上の項目をクリックすると、サムネイルから全画面画像に遷移し、その画像がその項目のページのタイトルになります。これらのトランジション効果はどのように作成されるのでしょうか。また、ReactRouter の代わりに内部ルーティングを使用してそれらを実装する最善の方法は何でしょうか。ただし、誰かが ReactRouter で動作させることができるのであれば、それを移植することもできます。利用可能なチュートリアルがいくつかありますが、別のプロジェクト ページに移動するのではなく、全画面モーダル コンポーネントと同様に、すべて同じペ...

P粉536532781 2023-09-15 22:09:37 0  1  965

折りたたみ可能な要素を Flexbox レイアウトに挿入する方法

画像が折り返されたフレックスボックス レイアウトがあり、画像がクリックされたときに情報を表示したいと考えています。情報は、「列」を移動せずに、画像を含む行とそのすぐ下の行の間に表示される必要があります。これは私が望むタイプの効果です: http://olmenta.altervista.org (本をクリックしたとき)。私がやったことは次のとおりです: https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉366946380 2024-03-19 23:20:59 0  2  375

JavaScript - vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを残して画面の外側にスライドさせる効果を実現する方法。

vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを画面の外にスライドさせたままにする効果を実現する方法。以下は私が書いたコードですが、私が書いたのは次のとおりです: マウスを上に動かします、ボックスはスライドしていますが、マウスは離れていませんが、ボックスは消えています。

PHP中文网 2017-05-19 10:30:36 0  2  850

javascript - JSイベントのバブリングの問題

一件落着: この効果を実現するには CSS を使用します。ご協力いただきありがとうございます。この効果を実現するために CSS の使用に切り替えました。 1. 次のコードでは、a タグのマウスオーバー イベントとマウスアウト イベントをリッスンしてキャンバス アニメーションをトリガーし、マウスオーバーとマウスアウトのコールバックでイベントがバブリングしないようにしましたが、マウスが移動すると...

学习ing 2017-06-12 09:32:56 0  3  820

JavaScript - アトムエディターのミニマップに関する質問

説明がわかりにくいので、上の図に移動してください。マウスの左ボタンを押したまま画像をつかんで下まで引き下げ、マウスの左ボタンを放すと上に戻ります。最初の写真と同じです。上は現在のアトムエディターのミニマップの状況です。一番下までスクロールしたいのですが、マウスを放すと一番下になり、戻れなくなります...

黄舟 2017-05-19 10:26:44 0  1  386

React を使用して画像上にインタラクティブ マーカーを配置する

助けてください。ホームページには以下のような画像が表示されています（拡大画像）。 「FORGE」の家には、中央に黒い矢印が付いた白と青のマーカーがあることに注意してください。 「賃貸」住宅も同様です。これらのマーカーはそれぞれ、インタラクティブなボタンとして機能します。予想されるインタラクション動作は次のとおりです: ホバーすると、青い背景が拡大して「Forge」または「Rentals」というテキストが表示されます。クリックすると、ユーザーは適切な「Forge」または「Rentals」ページに移動します。また、画面のサイズが変更されたときに応答するようにしたい、

P粉896751037 2023-09-08 21:25:41 0  1  833

スライダープレビューをスローモーションにする方法

スライダーのプレビューを画像どおりに動かす必要がありますが、すぐに最後まで移動します。2つのボタン（左と右）を使用してプレビュー・スライダーを作成しようとしましたが、右のボタンを押すと、必要なときに最後まで移動します画像どおりに移動します。ここにリンクがあります: https://codepen.io/alexvambato/pen/yLGBxKK/*codepen.io のスタイルを表示*/functiontoMove(){varmove=document.querySelector('#thumbelina)

P粉715274052 2023-08-17 22:42:11 0  1  593

javascript - キャンバスでのマウス座標の取得に関する問題

ウィンドウ付属のお絵かきボードの線画機能のような線画効果をマウスで作りたいと考えています。これにはマウスの座標を取得する必要があるのですが、キャンバスに線を引くといつもカーソルの下にはっきりと線が引かれず、座標が正確に取得できていない気がします...

过去多啦不再A梦 2017-05-19 10:29:32 0  1  594

javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生し続けます。動きの効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

给我你的怀抱 2017-06-30 09:52:30 0  1  849

JavaScript - スワイパー画像をスワイプできません

質問の件名は、要求されたデータがなかったため Vue で書かれていたため、偽のデータが作成されました: これは動的に生成された img タグであり、ページ上で使用されます: しかし、Chrome を開いて効果を見ると、これはスワイプできず、最初の画像しか表示されないということですが、その写真の動的生成された画像も以下のように正しい構造になっているのですが、なぜ描画できないのでしょうか...

黄舟 2017-07-05 10:48:46 0  6  1272

正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する

このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getElementById('canvas');canvas.height=window.innerHeight;//全画面の高さをキャンバスに設定します Canvas.width=window.innerWidth ;//キャンバスを全画面幅に設定すると、マウスの座標を取得しやすくなります constmouse={x:unknown,y:u

P粉752290033 2023-09-12 12:20:33 0  1  733

純粋な Javascript を使用して画像置換のためのトランジション効果を実装する

私が作成した Web サイトには多数のアコーディオンがあり、それぞれの上部に画像があります。アコーディオンを開くと中に説明があり、画像が切り替わります。アコーディオンを閉じると、画像は最初の画像に戻ります。問題は、この画像の変更には、フェード効果を伴う滑らかな遷移を持たせたいのですが、現在は単なる突然の変更であるということです。どうすればいいですか？アコーディオン ボタンの ID が「button」で、最初の画像 (2 番目の画像に変更されます) を含むラベルの ID が「firstimage」だとします。これはJavaSです

P粉458913655 2024-03-30 00:14:11 0  1  434

javascript - 画像収集効果、プラス 3D 効果、なぜ収集後に線が発生するのですか?

div には多数のサブディビジョンがあり、サブディビジョンの背景画像を組み合わせて全体の画像を形成します。集合効果として、3D の Y 軸反転効果を追加しました。接合するときの真ん中? 論理的には集めた後になるはずです 結果がこれです コードを添付します pic{幅: 1000px;高さ: 655px;位置...

曾经蜡笔没有小新 2017-05-18 10:46:23 0  1  551

JavaScript - フォトアルバム効果を実現するにはどうすればよいですか?どのプラグインを使用すればよいですか?

クリックして画像をプレビューし、左右にスライドして数字を表示します。リンクをコンピューターに貼り付けましたが、マウスをクリックしても効果がありません。使用できる成熟したプラグインはありますか?書いたマスクはプレビューできますが、左右を切り替えるのは書きにくいです。

PHP中文网 2017-06-30 09:56:05 0  4  785

レイアウトの変更を防ぐために、可変サイズの画像をロードする前にそのスペースを予約するにはどうすればよいですか?

テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。これは画像の前のテキストです。 <imgsrc="image.jpeg"/>これは画像の後のテキストです。画像の読み込みに時間がかかるため、ページが読み込まれるとき、画像よりも先にテキストが読み込まれるようになりました。そのため、画像の後のテキストが画像の前のテキストの直後に配置されるようにレイアウトが変更され、画像がまだ読み込まれていない場合、画像用のスペースは確保されません。ただし、画像を読み込むと、画像の後のテキストが下に移動します。

P粉936509635 2023-08-28 00:04:44 0  1  609

影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します

まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpress-493302-3130963.cloudwaysapps.com/ CSS トランジションを使用して達成したいことの半分は正常に達成されましたが、シャドウが表示されません上の画像に示されている作成ボタンのコピー。私のCSSは次のとおりです。cta-button-menu:hover{transform:rotateZ(45deg)

P粉546257913 2024-04-04 11:55:21 0  2  449

HTML マークアップで SVG を直接使用すると、ボタンに役割を割り当てたり、必要なホバー効果を付与したりすることができません

2 つの機能を実行するアイコンを持つコンテナがあります: ボタンのように動作します (キーボード/スクリーン リーダーなどを介してアクセス可能) ホバー/フォーカスで赤になります。 マークアップ内で SVG を直接使用すると、ホバー効果が停止します。期待どおりに機能しますが、img タグを使用する場合のように SVG にボタンの役割を割り当てることはできません: .container{height:500px;width:400px;background-color:lightblue;position:relative;}.favorite

P粉940538947 2023-09-06 20:29:59 0  1  575