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

Css缩略图在wordpress中悬停问题

2 个答案: