そこで、次の記事の例にあるように、マウスオーバー効果を再現してみました。 https://blog.prototypr.io/stunning-hover-Effects-with-css-variables-f855e7b95330
しかし、私の場合は、Vue.js を使用して vuetify ライブラリから v-card にホバー効果を適用したいと考えています。
これが私の試みです:
https://codepen.io/pokepim/pen/NWdwOEq
カード上にマウスを移動すると座標が明確に取得できるようになりましたが、コンポーネント レベルでスタイル バインディングを行っても、CSS は更新されないようです。誰か私が間違っていることを知っていますか？
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私が作成したこの codesanbox を確認してください: https://codesandbox.io/s/stack-70157850-3cblq?file=/src/components/CustomExample.vue
カスタム CSS スタイルを
リーリーv-cardに適用することができました。vuetify スタイルをオーバーライドするのは少し難しい場合があります。最初に、元のボタンの例で SCSS が使用されているため、SCSS を使用することを指定する必要があります。これは、スタイル ブロックでlang属性を指定することで実行できます。終了後、一部の CSS プロパティ (背景、色、境界線の半径など) がまだ機能しないことに気づくでしょう。 Vuetify の sass/scss 変数をいじりたくない場合。 #! important
例で作業しているときに、offsetTop の値がマウス ポインターの下で少しずれていることに気づきました。これは、ルールを使用して、これらの CSS プロパティを強制的に適用できます。app## を設定したときの
v-app-barが原因で発生しました。 # 属性を使用すると、アプリ バーはレイアウトの一部としてページの上部に残ります。