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

-2

所以我拥有的是这个网站： http://www.gameplay-universe.uphero.com/ 如果您将鼠标悬停在表格中页脚上的社交图片上，您会看到较小图像变大并移动布局。如何避免/解决这个问题？不管是CSS/HTML/JS，我都需要解决这个问题。我的代码：HTML/CSS图像悬停 - 使用不同大小的图像

<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等..）的小提琴。提前致谢！

来源

2013-08-30 PowerUser

*能*我们有一个小提琴？ – GLES

[不要使用表格进行布局]（http://webdesign.about.com/od/layout/a/aa111102a.htm） – Itay

**欢迎！请记住，这个粉丝网站上的每一个内容都受到美国版权法的保护！**抱歉，再也忍不住了。 –

集这些CSS属性来保持图像的元素：

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

设置高度将迫使它留静态到那个高度。

来源

2013-08-30 17:12:07

给你的表min-height：

改变这一行：

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

要：

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

来源

2013-08-30 17:15:42

-1

给z-index到<div>包含图像。

来源

2013-08-30 17:30:57 vishalkin

我只想把填充或利润率上的图像，然后取出悬停填充/保证金

来源

2013-08-30 18:06:53 MaKR

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

回答

相关问题