對圖像效果的其他圖像的鼠標移動效果

http://www.concept-it.be/sodrie3/collectie.html

然而，當我使用下面的代碼：

$('.coll_img').hover(
function(){ 
    var cssObj = { 
    "border" : "1px dashed", 
    "width" : "205px" 
    } 
    $(this).css(cssObj); 
}, 
function(){ 
    var cssObj = { 
    "border" : "0", 
    "width" : "205px" 
    } 
    $(this).css(cssObj); 
} 
);

效果已完成，但其他的圖像受到太大。

我要保持它的簡單（喜歡無插件）。

我想我需要的東西添加到我的CSS代碼。

grtz並在此先感謝

來源

2011-02-18 Dante

邊框被添加1px的到圖像中的哪一個改變你的格式大小，你需要或者改變寬度是2px的少懸停圖片（203px，如果沒有懸停，則將圖像填充設置爲1px

編輯：您可能希望使用單獨的<img />標記，並在懸停時的「放大」圖像中加載，以便格式化您的圖片沒有得到不正常的，當你增加寬度和添加邊框

東西LIK e懸停多餘的圖像src獲取更新到懸停的圖像，並將位置設置爲絕對，設置頂部和左側座標以匹配懸停圖像

來源

2011-02-18 20:47:16 MikeM

設置正常（非懸停）狀態的1px邊界也可以嘗試不可見的邊框顏色。我會建議你只使用純CSS：

.coll_img { 
    border: 1px solid invisible; 
} 

.coll_img:hover { 
    border: 1px dashed black; 
}

如果你不喜歡的圖片，你可以嘗試緣之間的差距1px的：與位置-1px上懸停，大概在一起：相對（於把它前面）。

懸停設置更小的固定寬度不完整的解決方案 - 您需要設置高度太:)

來源

2011-02-18 20:59:09

你可以做到這一點沒有任何的jQuery可言：

http://jsfiddle.net/jtbowden/QkMss/embedded/result/

的關鍵是將li元素的大小設置爲與圖像相同，將元素浮動爲li，然後使用:hover調整img（而不是li）的大小，邊距和z索引。確保你的img是完全或相對定位的，這樣z-index才能正常工作。

這是我測試儘可能工作在所有主流瀏覽器的最新版本。

來源

2011-02-18 21:56:56

我不認爲其他圖像受到影響，因爲有其他圖像沒有邊界，當你將鼠標懸停在一個。因爲容器有足夠的寬度來容納放大的圖像，所以問題不在於圖像的寬度。

問題是與高度。縮放後的圖像會導致懸停圖像將其高度從100px加上102.5加上邊框頂部&底部的額外2 px，因此下面的圖像具有float：left set，由於高度增加，無法漂浮在圖像下面上面的圖片。

你可以通過應用「height：109px」來解決這個問題。 css規則在你的styles.css中的「.collection li」。我知道這會在每一行圖像之間留下一些空間，但我想不出任何其他解決方案。

來源

2011-02-18 23:01:51

對圖像效果的其他圖像的鼠標移動效果

回答

相關問題