因此，我嘗試重新建立滑鼠懸停效果，如以下文章中的範例所示： https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330
但就我而言，我希望使用 Vue.js 將懸停效果套用到 vuetify 庫中的 v-card 上。
所以這是我的嘗試：
https://codepen.io/pokepim/pen/NWdwOEq
現在，當滑鼠懸停在卡片上時，我清楚地獲得了座標，但即使在元件層級進行樣式綁定，CSS 似乎也沒有更新。有人知道我做錯了什麼嗎？
檢查我製作的這個codesanbox：https： //codesandbox.io/s/stack-70157850-3cblq?file=/src/components/CustomExample.vue
我能夠將自訂css 樣式套用到
v-card，覆蓋vuetify 樣式有時可能有點棘手，首先您需要指定您將使用SCSS，因為原始按鈕範例使用它，您可以透過在樣式區塊中指定lang屬性來完成此操作。完成後，您會注意到一些 css 屬性（例如背景、顏色、邊框半徑）仍然不起作用。如果你不想弄亂 Vuetify 的 sass/scss 變數。您可以使用
!important規則強制套用這些 css 屬性。當我在處理我的範例時，我注意到offsetTop 值在滑鼠指標下有點錯位，這是因為我的
v-app-bar而發生的，當您設定app屬性時，應用程式列保持在頂部頁面作為佈局的一部分。因此，我所做的快速修復只是簡單地從 offsetTop 值中減去應用欄高度，當然，這可能會根據您的設計佈局而有所不同。