css - wordpress中的CSS缩略图悬停问题

Question

我在这里工作http://tinyurl.com/a74ko2o，这是一家电子商务商店，由 wordpress 提供支持，我的问题是在单个产品页面中，在此链接页面中进行 css 设计，你们可以在悬停时看到大图像下的缩略图缩略图显示实心红色边框

我添加了这个效果，但是现在，问题是当它悬停时，图像向下移动，而不是固定。我需要修复它，就像这个网站http://emporium.premiumcoding.com/demo.php

此处为缩略图的 css

.leftcontentsp .thumbnails img {
    border: 4px solid #343434;
    height: 92px;
    margin: 5px 4px 8px 0;
    width: 92px;
}

悬停时

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
}

请帮助解决这个css问题，在此先感谢

Answer 1

问题是因为在5px宽后添加宽边​​框会导致图像向下移动4px的1px差异。我们可以通过添加和删除填充来解决这个问题，因此图像保持在原位：

.leftcontentsp .thumbnails img {
    border: 4px solid #343434;
    height: 92px;
    margin: 5px 4px 8px 0;
    width: 92px;
    padding: 1px;
}

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 5px solid #d00000;
    padding: 0;
}

或者，如果这是一个错误，只需将边框设置:hover为与普通边框一样宽。

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 4px solid #d00000;
}

Answer 2

看看男人的不同

给出相同的边框宽度

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}

与自然状态一样

1px令人不安

这是为了

悬停过渡

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 4px solid #d00000;
-webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }