マウスが要素上で停止したかどうかを確認するにはどうすればよいでしょうか?

JavaScriptまたはCSSを使用して要素の上にマウスを置くのを止める方法を知りたいです。マウスを要素の上に置くと背景の色が変わるアニメーションを作成しています。また、要素の上にマウスを置くのをやめたときにアニメーションを追加したいと考えています。これどうやってするの？

P粉547420474 2024-03-31 13:28:28 0  1  365

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 0  1  419

ホバーされたテキストはマウスの位置で色が変わります

すべてのテキストではなく、マウスの位置のテキストのみの色を変更するにはどうすればよいですか?このように、マウスの動きに合わせて表示される円が表示され、ホバーするとテキストにホバー中の文字の一部の境界線のみが表示されます。どのライブラリまたは関数を使用する必要があるかアドバイスが必要です。

P粉697408921 2024-03-28 14:12:45 0  1  512

マウスオーバーイベントを使用してフライアウトメニューを表示する

ポップアップ メニューがあり、マウスオーバー イベントを使用して切り替えようとしていますが、期待どおりに動作していないようです。 div を .hero-list-blocka:hover+.flyout-menu のように配置して CSS ホバー イベントを使用しようとしましたが、これは機能しませんでした。これを修正/改善する方法について何か提案はありますか?ありがとうございます constflyoutLink=document.querySelector('.flyout-link');constflyoutMenu

P粉254077747 2024-04-03 15:14:43 0  1  551

マウスをボタンの上に置くとサブメニューが表示されます

ボタンの上にマウスを置くとサブメニューがポップアップする解決策を探しています。現在、メニューはクリックされた場合にのみ表示されます。ボタンの上にマウスを置くとメニューが表示され、クリックするとメニューがそこに留まるようにするには何を変更する必要があるか知っている人はいますか。解決策: ホバーをマウスオーバーに変更します。マウスオーバー時にすべてのセクション（sect1...）を表示しないようにする方法を知っている人はいますか？ <script>vardivsvarbtn1=document.getElementById("

P粉021708275 2023-08-31 11:22:01 0  1  653

ホバー時にアニメーションを一時停止し、マウスが離れるとアニメーションを継続する方法

私はいくつかの解決策にうんざりしましたが、これが私が得た最も近い解決策です。しかし、この結果にはまだ満足していません。マウスが要素から離れると、要素は元の回転に戻ってしまうからです。要素の上に移動すると、マウスが要素から離れた場合でもアニメーションがトリガーされるという考えです。要素の上にマウスを移動すると、アニメーションが再生されて 0 度に留まり、マウスが離れると別のアニメーションが再生され、回転して -8 度に戻ります。 consstelements=document.getElementsByClassName('rota

P粉786800174 2024-04-01 09:43:54 0  1  451

1 つの要素をホバーしたときに他の要素に影響を与える方法

私がやりたいのは、div をホバーすると、別の div のプロパティに影響を与えることです。たとえば、この JSFiddle デモでは、#cube の上にマウスを置くと背景色が変わりますが、私が望んでいるのは、#container の上にマウスを置くと #cube が影響を受けるということです。 div{outline:1pxsolidred;}#container{幅:200px;高さ:30px;}#cube{幅:30p

P粉769413355 2023-08-27 12:48:40 0  2  467

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

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

P粉520545753 2024-03-29 13:34:50 0  1  349

Leaflet のマーカーに 2 つのポップアップを持たせるにはどうすればよいですか? 1 つはマウスオーバーで、もう 1 つはクリックでしょうか?

タイトルを地図上のマーカーの上に置き、クリックすると、さまざまなコンテンツを含む完全なポップアップが開きます。対応するポップアップへのリンクとして使用されるすべてのマーカーのリストを含む凡例を作成しようとしていますが、これを行う方法がわかりません。

P粉254077747 2024-04-01 12:40:41 0  1  467

Bootstrap Vue を使用してホバー時に選択ドロップダウンを開く方法

<select> または <b-form-select> をトリガーし、マウスオーバー時にオプションのドロップダウン リストを表示する方法が必要です。 JQuery や Vue.js 以外の外部プラグインは使用しません。

P粉635509719 2024-03-26 14:04:58 0  1  470

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

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

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

Blazor wasm で行ホバーを実装する方法

コレクション内の変数行の数に基づいて変更される Blazor テーブル コンポーネントがあります。 項目名 説明 アップローダー アップロード日 @foreach(variiteminItems){@item.Name@item.Description@item.UserName@item.UploadDate.ToString( " dd-MM-yyyy")DoWork} 私がしなければならないことは、マウスが行の上にあるときに、その行の特定の要素のみが有効になることです。例えば、

P粉425119739 2023-08-13 16:53:14 0  1  495

マウスオーバー時のコンポーネントフィールドに基づいて div の背景を変更する方法

ホバーすると背景色が変化する div があります。また、コンポーネント内の要素に基づいて色を選択する必要があります。 <div*ngFor="letuofusers;"[style:hover.background-color]="u.selected?'red':'blue'"></div>

P粉968008175 2023-09-12 09:24:31 0  1  569

タイトルを「ホバー展開メニューをクリック展開に変更する方法」に書き換えます。

したがって、基本的には、カーソルを置くと展開するメニューがあります。クリック時に展開するようにコードを書き直すにはどうすればよいですか (クリックすると展開し、もう一度クリックすると折りたたむ)。必要に応じて JavaScript を使用することもできますが、私はすべてを HTML と CSS だけで行うようにしています。 html,body{font-family:Arial,Helvetica,sans-serif;}.navigation{width:300px;}.mainmenu,.subm

P粉090087228 2024-01-16 18:51:40 0  1  448

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  572

スタイル a の上にマウスを置くと、 a の背景色が黄色に設定されます。

これは、マウスがスタイル a の上にあると、a の背景色が黄色に設定されることを意味します 1234 a:hover {background-color: yellow; } これが最も一般的です。

PHP中文网用户-9291898 2022-09-22 19:25:53 0  1  862

Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない

ホバー スタイルを使用して、内部にいくつかのソーシャル アイコンを備えた視差スクロール ヘッダーを実装しました。現在、ホバー スタイルは Safari では機能しません。コンテナ上のtransform-style:preserve-3dを削除すると、ホバースタイルは機能します（ただし、視差は壊れます）。 Chromeでは問題なく動作します。 <!doctypehtml><htmlclass="h-full"><head><scriptsrc=

P粉346326040 2023-08-30 18:33:26 0  1  495

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

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

P粉041758700 2024-01-10 18:06:56 0  1  425

Tailwind CSS のホバー状態の問題を修正

現在、単一ページの Web サイトのナビゲーション バーのスタイルを設定しています。ユーザーがボタンの周囲の div の上にマウスを移動すると、背景色が濃い緑色に変更されるだけでなく (これはすでに機能しています)、テキストの色も白に変更されて、表示されるようにしたいと考えています。ただし、「hover:text-white」クラスを div に割り当てたにもかかわらず、テキストは現在上書きされています。これが私のindex.htmlです！ <!DOCTYPEhtml><htmllang="en"><hea

P粉039633152 2023-12-31 08:53:39 0  1  539

特別なカーソルを使用してホバー時にテキストを変更します

monopo の Web サイトと同様に、ホバー時にテキストを変更する方法を教えてください。背景なんて必要ないんです。必要なのは、単純な円形の効果 (色付きの背景など) とテキストの変更だけです。また、できれば「about」という名前のdiv内でのみエフェクトが有効になるようにしたいです。ウェブサイトリンク：https://monopo.london/

P粉665427988 2023-09-05 23:47:42 0  1  546