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

Psuedo 要素の CSS ホバー効果を使用してメイン要素をオーバーラップする

基本的に、ホバーしたときの効果は次のようになります。 私の Web サイトのコードは次のとおりです。無視してください。重要: .cta-button-menu,.cta-button-menu::before{transition:all0.3slinear!重要;幅:120px!重要;高さ:50px!重要;表示:インラインフレックス!重要;justify-cont

P粉838563523 2024-03-20 10:31:28 0  1  322

ボタンをアクティブにするとホバー効果が誤動作する

私は Web 開発 (HTML、CSS、JS) の基礎を学ぼうとしているので、動作する Apple 電卓を作ろうとしています。小さなバグに気づくまではすべてが正常に動作していました。最初は、アクション ボタンのホバー効果がうまく機能し、ホバーするにつれて色が明るくなりました。ボタンを押すと、ボタンが明るくなり、ユーザーが別の番号 (または「等しい」ボタン) を入力して前の番号で何かを行うまで、その状態が維持されます。その後、アクションボタンは通常の色に変わります。それまでは何も問題はなかったのですが、ユーザーがボタンを押した後、

P粉548512637 2024-04-01 21:51:26 0  1  539

:hover 効果を複数の要素に動的に追加する

プログラムで複数の要素にホバー効果を追加することはできますか?私たちのシステムでは、単一のユニットを表す複数の要素が存在します (ただし、他の理由で複数の要素に分ける必要があります)。場合によっては、ホバー時に一緒に色を変更する必要があります。プログラムで複数の要素にホバー効果を追加することは可能ですか?それともこれは良い習慣なのでしょうか？ my_own_css_class を使用し、ホバー時にすべての要素に追加することで、この問題を解決できました。しかし、プログラムでホバー効果を持たせるとうまくいくかもしれないと感じています

P粉203792468 2023-08-15 23:49:58 0  1  492

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

中にテキストが入った傾き効果のあるボタンがあり、ボタンにマウスを置くとボタンの横に 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

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

ランニングしても効果なし

走っても効果なし、走っても効果なし、走っても効果なし、走っても効果なし。

ngh 2021-08-26 00:30:45 0  3  1234

React を使用した HTML の SVG パス セレクター

ユーザーがSVGをアップロードできるペイントアプリケーションを作成しています。さまざまな色で塗りつぶし、SVG 上に描画してから消去します。しかし、残念ながらSVGのパスを取得できません。以下は SVG 画像です。ホバーした場合、そのホバー パスのパスを取得し、選択した色で塗りつぶしたいだけです。 Canvas パスと SVG パスを試してみました。しかし、運がありません。 Canvas には beginPath メソッドがあり、SVG を描画するために使用します。 <?xmlversion='1.0'encoding='utf-8'?&

P粉566048790 2023-09-01 23:22:48 0  1  588

CSS 表示プロパティのグラデーション効果

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

P粉608647033 2023-08-21 11:08:32 0  2  568

ヘルプ: ページネーション効果がないのはなぜですか?

クエリの結果はすべて表示されますが、ページング効果は表示されません。

无与伦比 2018-11-28 18:02:13 0  0  1020

ストローク効果のあるSVGグラデーション

このコードを見つけました<svgxmlns="http://www.w3.org/2000/svg"viewBox="-1-13434"><circlecx="16"cy="16"r="15.9155"class="プログレスバー__背景"/&

P粉193307465 2023-08-29 09:30:52 0  1  531

グレースケール SVG がアルファに変換されると明るさが低下するのはなぜですか?

SVGを使用して透明な「星空」効果を作成しようとしています。 Web ページ上の黒い背景要素内に SVG をインラインで配置しています。まず乱流フィルターから始めて、次にカラー マトリックスを適用して目的の効果を実現しました。 <svgxmlns="http://www.w3.org/2000/svg"><filterid="filter"><feTurbulencebaseFrequency="0.2&q"

P粉986937457 2024-02-26 18:01:19 0  1  306

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

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

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

Vuetify 2 の v チェックボックスのホバー効果を無効にする

Vuetify2 の v チェックボックスの上にマウスを移動すると、チェックボックスの後ろに淡色の円が表示されます。表示されないようにしたいです。現在、v-checkbox は v-tab と v-tooltip でラップされています。それが重要かどうかは疑わしいが、可能性はある。 <v-tabv-for="tabinmyTabList":key="tab"><span>{{$t(tab)}}</span&g

P粉826429907 2023-09-03 20:25:54 0  1  532

JavaScript - ツリー構造効果

顧客をクリックすると現在のユーザーに属する顧客が表示され、顧客をクリックすると顧客のビジネスが表示され、最上位のビジネスが出てきます。 。 。 。この種の木の効果を表示する最良の方法は何ですか?どうすればいいのか、達人が行動します

阿神 2017-06-28 09:23:51 0  1  940

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

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

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

JavaScript - 左側のナビゲーションを拡大縮小する方法

ボタンをクリックすると、「これはプラグインを使用して行われますか?」と表示されます。ネイティブを使用する場合、ホバー効果はどうあるべきですか?

三叔 2017-06-30 09:59:54 0  1  810

extra の下にあるファイルは効果がありません

エクストラの下にあるファイルが効果がないのはなぜですか?

之灰 2018-03-27 21:33:03 0  0  1301