如何防止悬停后悬停/更改位置时元素略微上升

时间:2013-03-03 08:01:01

标签: jquery html css lazy-loading

我正在使用socialite.js创建社交按钮的延迟加载效果 一切都很好,但是在推出之后,按钮会有点向上。

Jsfiddle

CSS
/*
 * Socialite Look-a-like defaults
 */
 .cf:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
* html .cf {
    zoom: 1;
}
*:first-child+html .cf {
    zoom: 1;
}
/* visually hidden from HTML5 Boilerplate */
 .vhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.social-buttons {
    display: block;
    list-style: none;
    padding: 0;
    margin: 00px;
}
.social-buttons > li {
    display: block;
    margin: 0;
    padding: 00px;
    float: left;
}
.social-buttons .socialite {
    display: block;
    position: relative;
    background: url('https://lh4.googleusercontent.com/-4P_Yq4L-QXM/UTHWS6CDigI/AAAAAAAAGrU/t4K0HmWUv2U/s194/socialshare.png') 0 0 no-repeat;
}
.social-buttons .socialite-loaded {
    background: none !important;
}
.social-buttons .twitter-share {
    width: 83px;
    height: 45px;
    background-position: -145px 0;
}
.social-buttons .googleplus-one {
    width: 65px;
    height: 45px;
    background-position: -75px 0;
}
.social-buttons .facebook-like {
    width: 77px;
    height: 45px;
    background-position: 0 0;
}
.social-buttons .linkedin-share {
    width: 59px;
    height: 25px;
    background-position: -215px 0;
}
</style>

我尝试了很多css技巧,但是徒劳无功。虽然我对jquery没有太多了解,但是我通过了socialite.js,发现没有任何与高度过后有关的信息。是否有任何技巧可以使元素的位置在继续相同的地方。谢谢。

1 个答案:

答案 0 :(得分:2)

我在Mac上使用Firefox 19,而替换图像的插件确实会更高(如果这就是你所指的那样)。

我尝试将margin-top:10px添加到.social-buttons > li,这似乎有用吗?

http://jsfiddle.net/NjuDa/

相关问题