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圖像懸停 - 使用不同大小的圖像

回答

相關問題