제출 단추 입력시 jQuery 배경 이미지 페이딩

Question

기본 도움말 (this tutorial)을 사용하여 호버에서 다른 배경 이미지 (스프라이트 사용)로 사라지는 배경 이미지가있는 링크를 만들었습니다. 이것은 기본적으로 호버 (hover)까지 숨겨진 링크 안에 빈 스팬 (span)을 넣은 다음 보임으로써 페이드 인 (fade in)하여 수행됩니다.

제출 버튼 입력을 사용하여 동일한 작업을 수행하려면 어떻게해야합니까? 분명히 자기가 닫히기 때문에 입력 태그 안에 HTML을 삽입 할 수 없으므로 범위를 넣을 수는 없습니다. 그럼 다른 옵션은 없나요?

내가 생각했던 한가지는 같은 너비/높이의 div로 입력을 둘러싼 채 호버 배경 이미지를주고 호버에서 스팬을 0.01과 같은 불투명도로 페이드 아웃하여 여전히 클릭 가능하지만 투명해야합니다. 더 좋은 옵션이 있습니까? 아니면이 방법이 있습니까?

Answer 1

나는 this technique을 사용했다.

기본적으로 요소 내부에 스팬을 추가하는 대신 요소 주위에 div를 추가하고 마우스를 올리면 단추가 사라집니다.

Answer 2

당신이 정말로 알고 싶은 것 (내가 그렇게 말할 수 있다면)을 생각해보십시오. 이미지를 양식의 제출 버튼으로 사용하는 방법입니다. 설정 한 후에는 jquery에서 메소드를 사용하는 것이 매우 간단해야합니다. 당신이 필요로하는 것, 그래서

또한 How to change an input button image using CSS?

이, 사파리 버튼에 대한 배경 이미지의 사용을 허용하지 않습니다주의 사항 : 여기

는 버튼의 배경 이미지를 사용하는 방법을 보여줍니다 다른 SO 질문 div (div를 사용하여 제안한 것과 유사)를 해킹합니다. 위의 질문은 이것에 대해서도 다루고 있습니다.