저는 ASP.NET .NET Webform 웹 사이트가 있습니다. 나는이 웹 사이트의 거의 모든 페이지에서 전송 버튼을 몇을 가지고 그들은 다음 코드로 생성됩니다슬라이딩 도어 효과로 제출 버튼을 만드는 방법은 무엇입니까?
<asp:Button id="b1" Text="Submit" runat="server" />
지금 내가 CSS 슬라이딩 도어 효과 (또는 뭔가를해야만 시뮬)에 대해이 작업을 전환 할 필요를 얻을 수 어떻게 가능한이 쉽게해야합니까 http://alistapart.com/article/slidingdoors
:
이 문을 슬라이딩 모든 버튼 (제출 및 링크 버튼)에 같은 모양?
'슬라이딩 도어'기술에서 발견 한 가장 큰 문제는 마크 업에 추가 요소를 추가해야한다는 것입니다. 당신은 <span> 태그에 버튼을 배치하여이를 달성 할 수 있어야한다 :
<span><asp:Button id="b1" Text="Submit" runat="server" /></span>
그리고 스팬에게 약간의 패딩을주는 왼쪽 또는 오른쪽 (당신이 나타날 그래픽의 작은 부분을하고자하는 측면에 따라 다름) . 롤오버 효과를 적용하려는 경우 문제가 발생할 수 있습니다 (버튼/링크의 :hover 상태에서 스팬이 적용되지 않음). 사용자는 버튼/링크 외부의 이미지를 클릭 할 수 없습니다. 버튼/링크를 누르십시오.
비교적 적은 이익을위한 많은 작업입니다.
복제하려는 디자인을 보지 않고도 정확한 솔루션을 제공하기가 어렵습니다. 이미지를 사용하여 얻으려는 대부분의 작업은 CSS로 수행 할 수 있으며 링크와 버튼에도 적용될 수 있습니다. '슬라이딩 도어'기술 (예 : IE의 onledr 버전)은 교차 모서리를 지원하지 않지만 대부분의 최신 브라우저는 잘 처리 할 수 있습니다.
그래서 당신이 말하는 것은 일종의 슬라이딩 도어로 제출 단추를 일반 html 단추로 전환하고 호버 효과를 유지할 수 없다는 것입니다. ASP.NET MVC에서이 작업을 수행했음을 알고 있지만이 경우 간단한 자바 스크립트를 구현 한 다음 제출할 양식을 제출 단추로 지정해야했습니다. 내가 마녀도 여기 같은 길을 가야합니까? 이 경우이 사이트의 모든 버튼을 변경하고 싶습니다. http://www.bradspel.net/ 일반 텍스트로 이미지가있는 이미지와 버튼 (호버 효과가있는 이미지)입니다. – Banshee
제출 버튼을'span'에서 감쌀 수 있어야하고'span.classHere : hover, span.classHere : hover input'을 사용하여 스타일을 지정할 수 있지만 여전히 일부 브라우저에서는 문제가 발생합니다 (미리 명시 적으로 무효화하지 않는 한 버튼의 기본 마우스 오버 동작과 맞서 싸울 것입니다.) 그리고 사용자가 스팬을 클릭 할 수없는 경우 (일부 자바 스크립트를 사용하여 제출 버튼의 동작을 부모 스팬에 적용하지 않는 한) . 그것은 그것에 대해 갈 수있는 정말 해커 방법입니다. – MassivePenguin