wordpress中的CSS缩略图悬停问题答案

【问题标题】：Css thumbnails hover issue in wordpresswordpress中的CSS缩略图悬停问题
【发布时间】：2013-03-02 10:23:41
【问题描述】：

我在这里工作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 问题，在此先感谢

【问题讨论】：

你设法修复了你的大写锁定按钮，太好了！
这是stackoverflow.com/questions/15173167/…的副本

标签： css wordpress

【解决方案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;
}

【讨论】：

【解决方案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;
    }

【讨论】：