的CSS缩略图悬停在WordPress

我在这里工作http://tinyurl.com/a74ko2o的问题，这是一个电子商务商店，采用WordPress，我的问题是，在单品页，在此链接页面的CSS设计，你们可以看到大图下的缩略图悬停缩略图显示实心红色边框的CSS缩略图悬停在WordPress

我添加此效果，但现在的问题是，当它盘旋着，图像的向下移动，而不是固定的。我需要它是固定的，精确的在这个网站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问题，在此先感谢

来源

2013-03-02 leito cancer

您设法解决您的大写锁定按钮，很好！ – dfsq 2013-03-02 10:25:54

这是http://stackoverflow.com/questions/15173167/css-issue-with-thumbnails-border-in-hover的副本 – JJJ 2013-03-02 16:09:13

问题是因为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; 
}

来源

2013-03-02 10:34:57 SeinopSys

看到了差距男人

给出相同的边框宽度

.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; 
    }

来源

2013-03-02 10:36:21

的CSS缩略图悬停在WordPress

回答

相关问题