현재 Vue에서 div 위로 마우스를 가져갈 때 TailwindCSS를 사용하여 버튼을 표시하는 데 약간의 문제가 있습니다. 일반적으로 CSS를 사용하여 수행하지만 뒷바람을 사용하여 수행하고 싶습니다.
가시성을 사용하여 문서를 참조 했지만 예상대로 작동하지 않았습니다. 화면 관련 요소에 대한 가시성이 일반적입니까? 또는 버튼 및 기타 콘텐츠에도 사용할 수 있습니까?
암호
<div>
<button class="text-white invisible hover:visible">Hello</button>
</div>
내 연구와 권장 사항을 기반으로 불투명도를 사용하라는 말을 들었지만 불투명도는 실제로 좋은 UI / UX 느낌을주지 못하므로 vue에서 다음과 같은 개인 부울 객체를 만드는 다른 경로를 사용했습니다.
private hover: boolean = false;
내가 찾은 참고 @mouseover및 @mouseleave뷰에 여전히 가능한 있습니다.
그런 다음 내 .vue파일 에서 부울 변수를 사용하여 숨기고 표시하려는 대상을 트리거하는 것을 고려할 것입니다.
마우스를 올릴 때 숨기고 표시하려는 대상 버튼 또는 요소
<div class="mt-2 mb-2"
`@mouseover = "hover = true"`
`@mouseleave = "hover = false"`
>Hello World
</div>
참고 : 나는 그런 일을 달성하기 위해 Vue를 typescript와 함께 사용하고 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다