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 值中减去应用栏高度，当然，这可能会根据您的设计布局而有所不同。