Javascript HTML/CSS图像悬停-使用不同大小的图像

Javascript HTML/CSS图像悬停-使用不同大小的图像,javascript,html,css,html-table,web-standards,Javascript,Html,Css,Html Table,Web Standards,所以我有一个网站: 如果将鼠标悬停在表中页脚上的社交图片上,您将看到较小的图片变大并移动布局。如何避免/修复此问题?不管是CSS/HTML/JS,我都需要解决这个问题。我的代码: <table class="social" align="center" height="40" width="40"> <tr> <td style="white-space: nowrap; margin: 0 auto;"> <a class="myButtonLink"

所以我有一个网站: 如果将鼠标悬停在表中页脚上的社交图片上,您将看到较小的图片变大并移动布局。如何避免/修复此问题?不管是CSS/HTML/JS,我都需要解决这个问题。我的代码:

<table class="social" align="center" height="40" width="40">
<tr>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/rss-inactive.png" border="0" onmouseover="this.src='/resources-backups/rss-active.png';" onmouseout="this.src='/resources-backups/rss-inactive.png';" alt="rss-feeds" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/youtube-inactive.png" border="0" onmouseover="this.src='/resources-backups/youtube-active.png';" onmouseout="this.src='/resources-backups/youtube-inactive.png';" alt="youtube" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/twitter-inactive.png" border="0" onmouseover="this.src='/resources-backups/twitter-active.png';" onmouseout="this.src='/resources-backups/twitter-inactive.png';" alt="twitter" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/facebook-inactive.png" border="0" onmouseover="this.src='/resources-backups/facebook-active.png';" onmouseout="this.src='/resources-backups/facebook-inactive.png';" alt="facebook" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/google-plus-inactive.png" border="0" onmouseover="this.src='/resources-backups/google-plus-active.png';" onmouseout="this.src='/resources-backups/google-plus-inactive.png';" alt="google-plus" />
</a>
</tr>
</table>


我还可以修改一下新标准(HTML5、CSS3等)的代码。提前谢谢

将这些css属性设置为保存图像的元素:

Position:relative;
height:(Here put in pixels the height of your element)px;

设置高度将强制它保持静止到该高度。

给您的桌子一个
最小高度:

更改此行:

<table class="social" align="center" height="40" width="40">

致:



z-index
赋予包含图像的

我会在图像上添加填充或边距,然后在悬停时删除填充/边距

我们可以用小提琴吗?欢迎!请记住,本粉丝网站上的所有内容均受美国版权法保护!很抱歉,已无能为力。请为新图像添加边框,使其大小相同。最简单的方法是使悬停图像与原始图像大小相同。
<table style="min-height:64px;" class="social" align="center" height="40" width="40" >