对图像效果的其他图像的鼠标移动效果

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

对图像效果的其他图像的鼠标移动效果

回答

相关问题