に質問検索_PHP中国語ウェブサイト

コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

人気の検索：
PHP
MySQL
jquery
HTML
CSS

vue および vuetify コンポーネントに対するマウスオーバー効果

そこで、次の記事の例に示すようにマウスオーバー効果を再作成しようとしました: https://blog.prototypr.io/stunning-hover-events-with-css-variables-f855e7b95330 しかし、私の場合は Vue を使用したいと考えています。 vuetify ライブラリから v-card にホバー効果を適用する .js。これが私の試みです: https://codepen.io/pokepim/pen/NWdwOEq

P粉032649413 2024-03-27 16:31:16

JavaScript - このストロークのアニメーション効果はどのようにして実現されるのでしょうか?

このストロークのような効果は、マウスをその上に置くと表示されますが、純粋な CSS で実現できますか?同じ効果を達成するにはどうすればよいでしょうか?

学习ing 2017-06-24 09:44:08

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

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

P粉757432491 2023-08-17 17:36:49

ホバー時のチルト効果のバグ

中にテキストが入った傾き効果のあるボタンがあり、ボタンにマウスを置くとボタンの横に 2 つの線が表示されます。ボタンが表示されるまでボタンの上にカーソルを置くコードがありますが、これは非常にランダムな副作用です。これは Chrome の問題だと思いますが、よくわかりません。問題の画像は次のとおりです: https://prnt.sc/hafHhDOHntco.button-skew{position:relative;width:fit-content;padding:6px40px;borde

P粉520545753 2024-03-29 13:34:50

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

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

P粉289775043 2024-03-27 20:29:28

ナビゲーションバーのホバー効果を実装する方法

垂直ナビゲーションバーを作成中です。そのアイコンの名前が右側に表示されるはずです。また、マウスをアイコンの上に置くと名前が白から黒に変わるはずですが、機能しません。それが役立つかどうかを確認するためにタグを変更してみました。また、HTML のタグを変更し、CSS のタグも変更してタグが機能するようにしました。このサイトで問題の解決策を探しました。ナビゲーションバーが機能しません。ここにコードを置く方法がわかりません。お役に立てれば、メッセージ経由でコードを送信させていただきます。理解するのに30分以上費やした

P粉041758700 2024-01-10 18:06:56

条件付きでclassNameをcssモジュールに変更（React）

ユーザーが Web サイトのナビゲーションバーの上にマウスを置いたときにアニメーションを再生しようとしています。マウスがナビゲーションバー上にあるかどうかに基づいて CSS モジュールを変更することでこれを実現しようとしています。このコードが機能しない理由を理解しようとしています。ご協力をよろしくお願いいたします。 Navbar.jsx: importReact,{useState}from"react";import{Link}from"react-router-dom";importstyles

P粉799885311 2023-08-17 18:10:17

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

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

P粉546257913 2024-04-04 11:55:21

画像の開始点と終了点

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

P粉511757848 2023-08-31 12:24:51

javascript - js (Vue) 実践：@を入力すると関連候補が自動で表示される方法は？

効果は次のとおりです。効果の説明: 1. ユーザーが @ 記号を入力すると、オプションリストが表示され、オプションリストは自動的に @ 記号の後ろに配置されます。 (現在のアイデアは、入力文字が @ であるかどうかを動的に監視し、カーソルの移動位置にリストボックスが表示されるというものです。) 2. ユーザーが @ を入力すると、ユーザーは入力を続行するという選択を無視します。。

PHP中文网 2017-07-05 11:03:32

MUI ツールチップの背景色を変更するにはどうすればよいですか?

「?」ユーザーがアイコンの上にカーソルを置くと、テキストフィールドに入力する必要があるデータの仕様が表示されるようにしたいと考えています。 MUI のデフォルトのホバーはグレーでテキストが白ですが、ホバーを白でテキストをグレーにし、フォントを大きくしたいと考えています。を使用すると、フォントのサイズと色が正常に機能することがわかりましたが、背景色を変更すると、ホバーテキストフィールドの周囲に灰色の境界線が表示されます。これは hover.js コンポーネントです:exportdefaultfunctionHoverTip(prop){const{tip}=pr

P粉147045274 2023-09-04 11:56:50

CSS スタイルがサイトに適用されない

Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービスカードの上にマウスを移動すると、背景が変化し、トランジション効果が得られます。ここからここまでになるはずです。ただし、サイトの背景をランダムな色に変更しようとすると、変更がサイトに反映されないため、HTML にリンクされている CSS に問題がある可能性があります。 @importurl('https://fonts.googleapis.com/css2?family=P

P粉613735289 2024-04-06 17:12:23

JavaScript マップマーカープラグインを探しています

1. 以下のような効果を実現できるJavaScriptプラグインはありますか? 左側の3つのオブジェクトを右側の地図にドラッグできます地図上にドラッグしてマウスを放すとマークが残りますマップ上で (マップの位置をマークするために使用されます)、マウスを放した後、編集可能なダイアログボックスがポップアップ表示されます。

怪我咯 2017-05-18 10:49:58

タグを使用して VEGA で直接レイアウトを強制する

各ノードのラベルを表示する強制指示レイアウトを使用して、VEGA でネットワーク図を作成しようとしています。可能なアプローチがこの質問で言及されています。 Vega エディタを参照すると、ラベルが存在することがわかりますが、いくつかの重複や視覚的な乱雑さの問題があります。そこで、ノードの上にマウスを置くとラベルが表示され、ダイアグラム内で強調表示されて固定されたままになる、この例と同様のことを実現できないかどうかを考えていました。「テキスト」フィールドでいくつかの変更を試みましたが、おそらくそれよりも複雑だと思います。

P粉882357979 2024-02-26 18:46:59

正確なマウス座標を取得できない問題: ページのサイズを変更するときに 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

javascript - マウスダウンイベントに関する質問

助けてください。$.animate を使用して、ページ要素 mousdown に基づいたイベントを実装しました。実行後、問題が見つかりました。マウスを連続して複数回クリックすると、アニメーションが複数回繰り返し再生されます。希望する効果達成するには、クリックするたびに最初から開始します。アニメーションを再生すると、複数回クリックすると、次のような複数のマウスダウンイベントが生成されます。

世界只因有你 2017-05-19 10:14:34

JavaScript - マウスホバー時に赤い境界線を表示する効果を実現する方法

このエフェクトを作成したのは誰ですか? これは、 border-right:1px Solid #eee;border-bottom:1px Solid #eee; を使用して、左側の ul li:hover{border-color:#ed9639 を作成する方法を私が書いたものです。 ;} マウスホバリング時ピクセルの赤枠もあります

过去多啦不再A梦 2017-07-05 11:04:45

JavaScript - div フレームを描画し、div でカバーされる dom 要素を取得するマウスを実装します。

この効果と同様に、マウスを移動して div ボックスを引いて、div で覆われている dom 要素を選択します。実装できる良いアイデアはありますか? 私が思いついた方法は、div の offsetLeft、offsetTop と、選択する必要がある各要素の offsetLeft、offsetTop を判断することです。

仅有的幸福 2017-05-19 10:09:21

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

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

PHP中文网 2017-06-30 09:56:05

CSS 表示プロパティの変換

私は現在、CSS の「メガドロップダウン」メニューを設計しています。基本的には通常の純粋な CSS ドロップダウンメニューですが、さまざまなタイプのコンテンツが含まれています。現在、CSS3 トランジションは「display」プロパティでは動作しないようです。つまり、display:none から display:block (または任意の組み合わせ) に移行することはできません。誰かがトップレベルのメニュー項目の 1 つにカーソルを置いたときに、上の例の 2 番目のレベルのメニューを「フェードイン」させる方法はありますか? Visibility: 属性で変換を使用できることはわかっていま...

P粉958986070 2023-08-23 12:27:32