2012-08-06 4 views
0

我目前使用onmouseover和onmouseout交換圖像懸停。這個效果很好,但現在我們想添加this scroller的效果 - 基本上,增加了如果圖像A是20x20並且懸停時顯示的圖像是80x80的功能 - 我怎樣才能讓懸停圖像在「頂部」打開其他人如此增加圖像大小不會影響容器或桌子?圖像更改/放大懸停不影響頁面間距

有幾個要求:該解決方案需要在IE7中工作,並且必須能夠在懸停時顯示不同的較大圖像。

+0

您可以使用CSS3變換(規模或矩陣)與過渡。它的支持不是通用的(ie9 +用於轉換,即10用於轉換)。 – mddw 2012-08-06 21:02:10

+0

similar http://stackoverflow.com/questions/11255586/growing-an-element-on-the-spot-in-css/ – Musa 2012-08-06 21:06:05

+0

謝謝。我理解交換圖像和變換的概念。但是,我需要將這兩者結合起來,並沒有看到這樣做的解決方案。 – MrsSecker 2012-08-07 14:20:54

回答

0

您可以使用CSS3對其進行縮放。

這裏的變換的例子:規模 - jsFiddle

下面是我在我的例子中使用的代碼:

<div class="box"></div> 

.box { 
    width: 50px; 
    height: 50px; 
    background-color: green; 
    -webkit-transition: 0.1s ease-out; 
    -moz-transition: 0.1s ease-out; 
    -o-transition: 0.1s ease-out; 
    -ms-transition: 0.1s ease-out; 
} 

.box:hover { 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
}