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

问题是因为在 4px 宽度之后添加一个 5px 宽的边框，您会得到 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;
}