Question

我想在图像墙上执行一个简单的效果。

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并提前致谢

Answer 1

边框正在向正在改变格式的图像大小添加1px，您需要将宽度更改为悬停图像的宽度减少2px（203px，左边为1px，右边界为1px）或当没有悬停时将图像填充设置为1px

编辑：你可能想要使用单独的<img />标签，并在悬停时加载“放大”图像，这样当您增加宽度并添加一个图像时，图像的格式就不会出现问题边界

类似于悬停时，额外的图像src会更新到悬停的图像并将位置设置为绝对位置，设置顶部和左侧坐标以匹配悬停的图像

Answer 2

将1px边框设置为正常（非悬停）状态，您可以尝试不可见作为边框颜色。我建议你只使用纯CSS：

.coll_img {
    border: 1px solid invisible;
}

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

如果您不喜欢图像之间的1px间隙，您可以尝试保证金：悬停时为-1px，可能与位置：相对（将其置于前面）。

在悬停时设置较小的固定宽度不是完整的解决方案 - 您还需要设置高度：）

Answer 3

你可以在没有任何jQuery的情况下做到这一点：

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

关键是要将li元素的大小设置为与图片相同，浮动li元素，然后调整img的大小，边距和z索引} {not li）:hover。确保你的img绝对或相对定位，以便它的z-index正常工作。

据我测试，这适用于所有主流浏览器的最新版本。

Answer 4

我不认为其他图像会受到影响，因为当您将鼠标悬停在其他图像上时，其他图像上没有边框。问题不在于图像的宽度，因为容器有足够的宽度来容纳缩放的图像。

问题在于高度。缩放的图像使悬停的图像从100px变为102.5，再加上边界顶部和周边的2px。底部，所以下面的图像有浮动：左设置，由于上面图像的高度增加，不能漂浮在悬停的图像下方。

你可以通过应用“height：109px;”来纠正这个问题。在styles.css中css规则为“.collection li”。我知道这会在每行图像之间留下一些空间，但我想不出任何其他解决方案。

图像上的鼠标悬停效果会影响其他图像

4 个答案: