vue 및 vuetify 구성 요소에 대한 마우스 오버 효과

Question

그래서 다음 글의 예시와 같이 마우스 오버 효과를 재현해 보았습니다. https://blog.prototypr.io/stunning-hover-events-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/comComponents/CustomExample.vue

이 작업은 v-card，覆盖 vuetify 样式有时可能有点棘手，首先您需要指定您将使用 SCSS，因为原始按钮示例使用它，您可以通过在样式块中指定 lang 속성에 사용자 정의 CSS 스타일을 적용하여 수행할 수 있었습니다.

으아악

완료 후에도 일부 CSS 속성(배경, 색상, 테두리 반경 등)이 여전히 작동하지 않는 것을 확인할 수 있습니다. Vuetify의 sass/scss 변수를 엉망으로 만들고 싶지 않은 경우. !important 규칙을 사용하여 이러한 CSS 속성을 강제로 적용할 수 있습니다.

예제 작업을 하는 동안 offsetTop 값이 마우스 포인터 아래에서 약간 잘못 정렬된 것을 발견했습니다. 이는 앱 바가 레이아웃의 일부로 페이지 상단에 머물렀을 때 내 v-app-bar 而发生的，当您设置 app 속성 때문이었습니다.

그래서 제가 한 빠른 수정은 단순히 offsetTop 값에서 앱 바 높이를 빼는 것이었습니다. 물론 이는 디자인 레이아웃에 따라 달라질 수 있습니다.