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

그래서 다음 문서의 예에 표시된 대로 마우스 오버 효과를 재현하려고 했습니다. https://blog.prototypr.io/stunning-hover- effects-with-css-variables-f855e7b95330 하지만 제 경우에는 Vue를 사용하고 싶습니다. .js를 사용하여 vuetify 라이브러리의 v-card에 호버 효과를 적용합니다. 이것이 나의 시도입니다: https://codepen.io/pokepim/pen/NWdwOEq

P粉032649413 2024-03-27 16:31:16 0  1  438

호버 시 기울기 효과 버그

내부에 텍스트가 있는 기울기 효과가 있는 버튼이 있는데 버튼을 마우스로 가리키면 버튼 옆에 두 줄이 나타납니다. 버튼이 보일 때까지 버튼 위에 마우스를 올려 놓는 코드가 있는데, 이는 매우 무작위적인 부작용입니다. Chrome의 문제인 것 같은데 확실하지 않습니다. 다음은 문제의 사진입니다: https://prnt.sc/hafHhDOHntco.button-skew{position:relative;width:fit-content;padding:6px40px;borde

P粉520545753 2024-03-29 13:34:50 0  1  359

버튼 활성화로 인해 호버 효과가 오작동함

저는 웹 개발의 기초(HTML, CSS, JS)를 배우려고 노력해왔기 때문에 작동하는 Apple 계산기를 만들어 보려고 노력해 왔습니다. 작은 버그를 발견하기 전까지는 모든 것이 잘 작동했습니다. 처음에는 액션 버튼의 호버 효과가 훌륭하게 작동했는데, 호버를 올리면 색상이 더 밝아졌습니다. 버튼을 누르면 버튼이 더 밝아지고 사용자가 이전 번호로 작업을 수행하기 위해 다른 번호(또는 "같음" 버튼)를 입력할 때까지 그 상태를 유지합니다. 그 후에는 작업 버튼이 일반 색상으로 변경됩니다. 그때까지는 모든 것이 괜찮았지...

P粉548512637 2024-04-01 21:51:26 0  1  564

Psuedo 요소의 CSS 호버 효과를 사용하여 기본 요소 겹치기

기본적으로 마우스를 가져가면 다음과 같은 효과가 나타나기를 원합니다. 여기 내 웹사이트 코드는 다음과 같습니다. 무시하세요! 중요: .cta-button-menu,.cta-button-menu::before{transition:all0.3slinear!important;width:120px!important;height:50px!important;display:inline-flex!important;justify-cont

P粉838563523 2024-03-20 10:31:28 0  1  349

그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기

먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://wordpress-493302-3130963.cloudwaysapps.com/입니다. CSS 전환을 사용하여 달성하려는 목표의 절반을 성공적으로 달성했지만 그림자를 볼 수 없습니다. 위 이미지에 표시된 대로 만들기 버튼의 복사본입니다. 내 CSS는 다음과 같습니다.cta-button-menu:hover{transform:rotateZ(45deg)

P粉546257913 2024-04-04 11:55:21 0  2  463

HTML 마크업에서 SVG를 직접 사용하면 버튼에 역할을 할당하거나 원하는 호버 효과를 얻을 수 없습니다.

두 가지 기능을 수행해야 하는 아이콘이 있는 컨테이너가 있습니다. 버튼처럼 작동합니다(키보드/스크린 리더 등을 통해 액세스 가능). 호버/포커스 시 빨간색으로 전환 마크업에서 SVG를 직접 사용할 때 호버 정지 효과 예상대로 작동하지만 img 태그를 사용할 때처럼 SVG에 버튼 역할을 할당할 수 없습니다: .container{height:500px;width:400px; background-color:lightblue;position:relative;}.favorite

P粉940538947 2023-09-06 20:29:59 0  1  581

순수 Javascript를 사용하여 이미지 교체를 위한 전환 효과 구현

내가 만든 웹사이트에는 여러 개의 아코디언이 있는데 각 아코디언의 상단에는 이미지가 있습니다. 아코디언을 펼치면 안에 설명이 들어가고 이미지가 다른 것으로 변경됩니다. 그런 다음 아코디언을 닫으면 이미지가 첫 번째 이미지로 다시 전환됩니다. 문제는 이 이미지 변경이 페이드 효과를 사용하여 부드럽게 전환되기를 원하는데 지금은 갑작스러운 변경일 뿐이라는 것입니다. 어떻게 해야 합니까? 아코디언 버튼의 ID가 "button"이고 첫 번째 이미지(두 번째 이미지로 변경됨)가 포함된 레이블의 ID가 "firstim...

P粉458913655 2024-03-30 00:14:11 0  1  438

Vuetify 2에서 v-checkbox의 호버 효과 비활성화

Vuetify2에서 v-체크박스 위로 마우스를 가져가면 체크박스 뒤에 흐린 원이 나타납니다. 나타나지 않았으면 좋겠습니다. 현재 내 v-checkbox는 v-tab과 v-tooltip으로 둘러싸여 있습니다. 그것이 중요한지는 의심스럽지만 가능합니다. <v-tabv-for="tabinmyTabList":key="tab"><span>{{$t(tab)}}</span&g

P粉826429907 2023-09-03 20:25:54 0  1  568

javascript - 이 스트로크 애니메이션 효과는 어떻게 얻습니까?

이 스트로크 같은 효과는 마우스를 위에 올리면 나타납니다. 순수한 CSS로 얻을 수 있습니까? 동일한 효과를 얻는 방법은 무엇입니까?

学习ing 2017-06-24 09:44:08 0  3  920

마우스를 올리면 콘텐츠 표시(카드 높이에는 영향을 주지 않음)

마우스를 올리면 표시되는 콘텐츠가 포함된 블록이 있습니다. 효과가 작동하는 방식은 다음과 같습니다. .hoverCard는 기본적으로 기본 콘텐츠를 표시합니다(.hoverCard__showOnHover의 콘텐츠는 숨겨짐). 사용자가 .hoverCard 위로 마우스를 가져가면 .hoverCard__showOnHover가 해당 콘텐츠를 표시하고 .hoverCard__body가 위로 전환됩니다("열림" 제공). ” 효과) 데모에서 위의 시각적 효과를 볼 수 있지만 애니메이션이 완벽하게 작동하도록 할 수는 없습니다. 내가 ...

P粉289775043 2024-03-27 20:29:28 0  1  447

이미지의 시작점과 끝점

이미지의 시작점과 끝점을 설정하려고 합니다. 캔버스와 이미지가 있고 이미지를 캔버스에 넣을 때 시작/끝 지점 위로 마우스를 가져가면 작은 빨간색 원이 켜지기를 원합니다. 이는 다른 이미지 연결을 사용하여 만들 수 있음을 의미합니다. 예: 1) 이미지를 드래그합니다. 2) 이미지를 캔버스에 배치합니다. 3) 시작점/종료점에 마우스를 올리면 작은 빨간 점이 켜집니다. 보시다시피 빨간색 점은 마우스를 올려놓을 때만 나타납니다. 또 다른 질문이지만 첫 번째 질문을 해결하면 멋지네요. 이미지가 그릴(사각형)을 따르지 않습니다. 이것은 htm...

P粉511757848 2023-08-31 12:24:51 0  1  581

네비게이션 바 호버 효과 구현 방법

저는 수직 네비게이션 바 작업을 하고 있습니다. 해당 아이콘의 이름이 오른쪽에 표시되어야 합니다. 마우스가 아이콘 위에 있을 때 이름도 흰색에서 검은색으로 바뀌어야 하는데 작동하지 않습니다. 도움이 되는지 알아보기 위해 태그를 변경해 보았습니다. 또한 HTML의 태그를 변경하고 CSS의 태그를 변경하여 태그가 작동하도록 했습니다. 내 문제에 대한 해결책을 찾기 위해 이 사이트를 찾았습니다. 내 네비게이션 바를 작동시킬 수 없습니다. 여기에 코드를 넣는 방법을 알 수 없습니다. 도움이 될 수 있다면 메시지를 통해 코드를 보내 드리겠습...

P粉041758700 2024-01-10 18:06:56 0  1  432

MUI 툴팁의 배경색을 변경하는 방법은 무엇입니까?

"?" 사용자가 아이콘 위로 마우스를 가져가서 텍스트 필드에 입력해야 하는 데이터에 대한 사양을 얻을 수 있기를 바랍니다. MUI의 기본 호버는 흰색 텍스트가 있는 회색이지만, 회색 텍스트와 더 큰 글꼴이 있는 흰색 호버를 원합니다. 를 사용하면 글꼴 크기와 색상이 잘 작동하지만 배경색을 변경하면 마우스를 올리면 텍스트 필드 주위에 회색 테두리가 나타납니다. hover.js 구성 요소는 다음과 같습니다.exportdefaultfunctionHoverTip(prop){const{tip}=pr

P粉147045274 2023-09-04 11:56:50 0  1  842

angular.js - 마우스로 가리키면 anglejs 레이블이 계속 깜박입니다.

Anglejs를 사용하여 마우스 오버 이벤트를 작성했을 때 마우스를 눌렀을 때 레이블이 계속 깜박이는 것을 발견했습니다. 각도 코드는 다음과 같습니다. {code...} 이 코드에 어떤 문제가 있습니까? 로그인이 성공할 때까지 마우스를 가리키면 Enter Home(홈 입력) 탭이 나타납니다. 문제를 파악해주세요...

巴扎黑 2017-05-15 17:07:12 0  3  676

MUI에서 텍스트 필드 레이블 색상 변경

안녕하세요. MUI 텍스트 필드의 텍스트 레이블 색상을 변경하는 데 문제가 있습니다. 테두리 색상과 호버 상태(레이블 포함)를 성공적으로 사용자 정의했지만 호버가 아닌 상태에서는 레이블 색상을 변경할 수 없습니다. 나는 다른 곳에서 했던 것처럼 DOM(MuiInputBase-input 포함)에서 찾은 다양한 클래스 이름을 시도했지만 성공하지 못했습니다. 나는 또한 inputProps를 시도했지만 아무것도 작동하지 않았습니다. 내 코드는 다음과 같습니다. <TextFieldclassName="w-fullm

P粉860370921 2023-08-26 17:15:52 0  1  512

마우스를 올리면 텍스트를 변경하려면 특수 커서를 사용하세요.

monopo 웹사이트와 유사하게 마우스 오버 시 텍스트를 변경하는 방법을 안내해 주세요. 배경은 필요하지 않습니다. 배경색과 같은 간단한 원형 효과와 텍스트 변경만 있으면 됩니다. 그리고 가능하다면 "about"이라는 div에서만 효과가 활성화되도록 하고 싶습니다. 웹사이트 링크: https://monopo.london/

P粉665427988 2023-09-05 23:47:42 0  1  563

여러 요소에 호버 효과를 동적으로 추가

프로그래밍 방식으로 여러 요소에 호버 효과를 추가할 수 있나요? 단일 단위를 나타내는 여러 요소가 있는(그러나 다른 이유로 여러 요소로 분리해야 하는) 시스템에서는 경우에 따라 마우스를 올리면 함께 색상이 다시 지정되어야 합니다. 프로그래밍 방식으로 여러 요소에 호버 효과를 추가할 수 있나요? 아니면 이것이 좋은 습관입니까? my_own_css_class를 사용하여 마우스를 올리면 모든 요소에 추가하여 이 문제를 해결할 수 있었습니다. 하지만 프로그래밍 방식으로 호버 효과를 만들면 나에게 도움이 될 것 같습니다.

P粉203792468 2023-08-15 23:49:58 0  1  506

그라데이션 배경과 함께 CSS3 전환 사용

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 제대로 작동합니다. 그라디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그랬기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:Background0.

P粉217629009 2023-08-23 21:25:42 0  2  651

CSS3 전환으로 그라데이션 배경 강화

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 훌륭하게 작동합니다. 그래디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그렇게 했기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:backgrou

P粉955063662 2023-10-12 18:05:11 0  2  633