마우스 오버시 텍스트 오버레이

Question

나는 페이드 또는 애니메이션 인/아웃과 같은 간단한 효과를 사용하여 a>img에 애니메이션 텍스트 오버레이를 추가하고 싶습니다.

이미이 작업을 수행하는 플러그인을 아는 사람이 있습니까, 아니면 내가보고 있어야하는 mootools 기능을 제안 할 수 있습니까?

Answer 1

당신은 Mootools의에 다음 의사 코드를 변환해야합니다 : -

가

1. 가 new Element() 기능을 사용하여, 주어진 요소 내부에 새로운 <div> 요소를 생성하는 함수를 작성. <div>의 내용은 부모 요소 외에도 함수 인수로 전달됩니다.
2. 작업 할 <a> 태그에 mouseenter 이벤트를 추가하면 위의 기능을 실행하고 자신을 부모 요소로 전달합니다. 부모 <a> 태그의 rel 속성을 자식 <div>의 내용으로 설정하여이 플러그인을 실제로 동적으로 설정할 수 있습니다.
3. 요소를 취하고 부모 요소의 치수를 찾고 요소를 부모 요소 경계 밖으로 이동시키는 슬라이드 애니메이션을 수행하는 slideOut() 함수를 만듭니다. 부모 요소 CSS에 overflow:hidden;이 설정되어 있는지 확인하십시오.
4. slideOut() 함수를 실행하는 <a> 태그에 mouseout 이벤트를 추가하고 그 자식으로 <div>을 전달합니다.

그렇게해야합니다.