호버시 CSS 이미지 교체

내 html 페이지에 2 개의 이미지가 있습니다. 마우스를 가져 가면 image2가 image1을 대체합니다. 이것은 문제가되지 않지만, image1이 이미지 자체의 링크를 형성하고 양쪽 이미지는 이미지의 실제 크기에 관계없이 항상 지정된 길이와 너비로 표시되어야합니다.호버시 CSS 이미지 교체

이제 image1의 링크 (href)와 지정된 세트 크기의 호버링 부분을 관리 할 수 있지만 두 이미지는 전체 이미지를 표시하는 대신 부분적으로 표시되지만 지정된 크기로 크기가 조정됩니다.

아무도 도와 줄 수 있습니까?

내 HTML :

이

<table width="100" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td> 
    <a href="@Url.Action("TestMethod", "Deal")" ><alt="" class="links" title="plaat1"/></a> 
    </td> 
</tr> 
</table>

내 .CSS가 :

.links { display:block; 
     background:url(../../Content/image1.jpg) center top no-repeat; 
     height:124px; 
     width:186px; 
     } 

.links:hover { background:url(../../Content/image2.jpg) center top no-repeat; 
      }

사람이 도와 주실 수 있습니까? 많은 감사합니다!

출처

2012-08-01 Angel

하십시오 설정 A [바이올린] (http://www.jsfiddle.net) 그것은 꽤 지저분한 HTML의 HTML 코드 – bPratik

... 무엇 ? 이것은 "img"태그로되어 있었습니까? 태그 안에 ".links"클라스를 넣으십시오. 두 배경 이미지의 크기를 모두 설정하십시오 ... – MCSI

을 확인 –

이 야 지금이 html 코드는 잘립니다하지 않고 모든 이미지를 표시하려는 경우가 IMG 태그를 사용해야합니다

<table width="100" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td> 
    <a href="@Url.Action("TestMethod", "Deal")" class="links" ><alt="" title="plaat1"/></a> 
    </td> 
</tr> 
</table>

출처

2012-08-01 04:23:35

에 사용되는 (즉 : 크기 조정). 당신은 잡아 당겨 졌을 때 이미지를 설정하고 복원하는 스크립트의 도움으로 이것을 할 수 있습니다. 호버 이미지의 경우 IMG 태그의 SRC 속성을 사용하고 사용자 정의 HOVER 속성을 사용합니다.

<html> 
    <head> 
    <style> 
     .links>img { height:124px; width:186px; } 
    </style> 
    <script> 
     onload = function() { 
     var a = document.getElementsByClassName('links'); 
     for (var b = 0; b < a.length; b++) { 
      var c = a[b].firstElementChild; 
      c.setAttribute('img', c.src); 
      c.addEventListener('mouseenter', function(ev) { 
      ev.target.src = ev.target.attributes['hover'].value; 
      }, false); 
      c.addEventListener('mouseout', function(ev) { 
      ev.target.src = ev.target.attributes['img'].value; 
      }, false); 
     } 
     } 
    </script> 
    </head> 
    <body> 
    <table width="100" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td> 
      <a href="@Url.Action("TestMethod", "Deal")" class="links" title="plaat1" /><img src="../../Content/image1.jpg" hover="../../Content/image2.jpg" /></a> 
     </td> 
     <td> 
      <a href="@Url.Action("logoff", "Logout")" class="links" title="Log Out" /><img src="../../Content/image2.jpg" hover="../../Content/image3.jpg" /></a> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

출처

2012-08-01 07:13:58 Jay

호버시 CSS 이미지 교체

답변

관련 문제