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

时间:2013-08-30 16:59:16

标签: javascript html css html-table web-standards

所以我拥有的是这个网站: http://www.gameplay-universe.uphero.com/ 如果您将鼠标悬停在页脚上的社交图像(表格中)上,您会看到较小的图像变为更大并移动布局。如何避免/修复此问题?无论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等)。提前谢谢!

4 个答案:

答案 0 :(得分:0)

将这些css属性设置为包含图像的元素:

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

设置高度会强制它保持静止到那个高度。

答案 1 :(得分:0)

为您的表格min-height

更改此行:

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

致:

<table style="min-height:64px;" class="social" align="center" height="40" width="40" >

答案 2 :(得分:0)

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

答案 3 :(得分:-1)

z-index提供给包含图片的<div>