Also habe ich versucht, den Mouseover-Effekt nachzubilden, wie im Beispiel im folgenden Artikel gezeigt: https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330
Aber in meinem Fall möchte ich mithilfe von Vue.js den Hover-Effekt auf v-card aus der Vuetify-Bibliothek anwenden.
Das ist also mein Versuch:
https://codepen.io/pokepim/pen/NWdwOEq
Jetzt erhalte ich eindeutig die Koordinaten, wenn ich mit der Maus über die Karte fahre, aber selbst mit der Stilbindung auf Komponentenebene scheint sich das CSS nicht zu aktualisieren. Weiß jemand, was ich falsch mache?
检查我制作的这个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 值中减去应用栏高度，当然，这可能会根据您的设计布局而有所不同。