vue & vuetify 组件上的鼠标悬停效果答案

【问题标题】：Mouse hover effects on vue & vuetify componentsvue & vuetify 组件上的鼠标悬停效果
【发布时间】：2022-01-06 11:44:03
【问题描述】：

所以我正在尝试重新创建鼠标悬停效果，如以下文章中的示例所示： https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

但在我的情况下，我希望使用 Vue.js 将悬停效果应用于 vuetify 库中的 v-card。所以这是我的尝试： https://codepen.io/pokepim/pen/NWdwOEq

现在，当我将鼠标悬停在卡片上时，我清楚地获得了坐标，但似乎即使在组件级别使用样式绑定，css 也没有更新。有人知道我在做什么错吗？

【问题讨论】：

【解决方案1】：

我能够将自定义 css 样式应用到 v-card，覆盖 vuetify 样式有时会有点棘手，首先你需要指定你将使用 SCSS，因为原始按钮示例使用它，你可以通过在样式块中指定 lang 属性来做到这一点。

<style lang="scss">
...
</style>

完成后，您会注意到一些 CSS 属性（如背景、颜色、边框半径）仍然不起作用。如果你不想弄乱 Vuetify 的 sass/scss 变量。您可以使用 !important 规则强制应用这些 css 属性。

当我处理我的示例时，我注意到 offsetTop 值在鼠标指针下有点放错了位置，这是因为我的 v-app-bar，当您设置 app 道具时，应用栏保持在顶部页面作为布局的一部分。

所以我做的一个快速修复只是简单地从 offsetTop 值中减去 appbar 的高度，当然，这可能会因您的设计布局而异。

【讨论】：

关于应用栏高度的重要提示。嗯，我没有注意到它是 scss，我认为这就是我的 codepen 示例不起作用的原因。至于覆盖 Vuetify 样式，我有时会发现使用 deep 选择器有助于更轻松地覆盖它们。但是!important 也可以。谢谢。
我在您的示例中注意到的一件事是，当您将鼠标悬停在文本上时，它会冻结，您也会发生这种情况吗？
哦！你是对的，我没有注意到。我错过了 span 块 pointer-events: none; Codesandbox 上的这个 css 属性已更新。