vue 和 vuetify 元件上的滑鼠懸停效果

Question

因此，我嘗試重新建立滑鼠懸停效果，如以下文章中的範例所示： https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

但就我而言，我希望使用 Vue.js 將懸停效果套用到 vuetify 庫中的 v-card 上。 所以這是我的嘗試： https://codepen.io/pokepim/pen/NWdwOEq

現在，當滑鼠懸停在卡片上時，我清楚地獲得了座標，但即使在元件層級進行樣式綁定，CSS 似乎也沒有更新。有人知道我做錯了什麼嗎？

Answer 1

檢查我製作的這個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 值中減去應用欄高度，當然，這可能會根據您的設計佈局而有所不同。