Kesan alih tetikus pada komponen vue dan vuetify

Question

Jadi saya cuba mencipta semula kesan tetikus seperti yang ditunjukkan dalam contoh dalam artikel berikut: https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

Tetapi dalam kes saya, saya ingin menggunakan kesan hover pada v-card daripada perpustakaan vuetify menggunakan Vue.js. Jadi ini adalah percubaan saya: https://codepen.io/pokepim/pen/NWdwOEq

Sekarang saya mendapat koordinat dengan jelas apabila melayang di atas kad, tetapi walaupun dengan gaya mengikat pada tahap komponen, CSS nampaknya tidak dikemas kini. Adakah sesiapa tahu apa yang saya lakukan salah?

Answer 1

Lihat kotak kod ini yang saya buat: https://codesandbox.io/s/stack-70157850-3cblq?file=/src/components/CustomExample.vue

Saya dapat melakukan ini dengan menggunakan gaya css tersuai pada atribut v-card，覆盖 vuetify 样式有时可能有点棘手，首先您需要指定您将使用 SCSS，因为原始按钮示例使用它，您可以通过在样式块中指定 lang.

Selepas selesai, anda akan dapati bahawa beberapa sifat css (seperti latar belakang, warna, jejari sempadan) masih tidak berfungsi. Jika anda tidak mahu mengacaukan pembolehubah sass/scss Vuetify. Anda boleh memaksa penggunaan sifat css ini menggunakan peraturan !important.

Semasa saya mengusahakan contoh saya, saya perhatikan bahawa nilai offsetTop agak tidak sejajar di bawah penuding tetikus, ini disebabkan oleh atribut v-app-bar 而发生的，当您设置 app saya apabila bar apl kekal di bahagian atas halaman sebagai sebahagian daripada reka letak.

Jadi, penyelesaian pantas yang saya lakukan ialah hanya menolak ketinggian bar aplikasi daripada nilai offsetTop, sudah tentu ini mungkin berbeza-beza bergantung pada reka letak reka bentuk anda.