Question

我的html页面上有2张图片：image2将在悬停时替换image1。这没有问题，但棘手的部分是image1自己形成一个链接，并且两个图像应始终以指定的长度和宽度显示，而不管图像的实际尺寸如何。

现在我可以管理悬停部分，指定的设置尺寸，图像1的链接（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;
             }

有人可以帮忙吗？非常感谢！

Answer 1

如果要显示所有图像而不进行裁剪（即：已调整大小），则必须使用IMG标记。您可以在脚本的帮助下执行此操作，以便在悬停时设置和恢复图像。将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>

Answer 2

嘿，现在习惯了这个HTML代码

<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>

悬停时css图像替换

2 个答案: