我正在尝试将div背景图像悬停更改为新图像,并且它可以正常工作,但是,当交换图像时,它会稍微移动。有没有办法消除这种转移效应?

.temptext {
    background: url("my-img1.png");
    background-size: 35% 33%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-left: 33%;
    margin-top: 38%;
}

.temptext:hover {
    background: url("my-img2.png");
    background-size: 35% 33%;
    background-repeat: no-repeat;
    background-position-x: 3.6px;
    background-position-y: -.35px;
}


我尝试使用background-position-x / y来指定像素偏移,这几乎完全消除了像素偏移,但是我现在已经手动降低到小数点后的百万分之一,并且仍在稍微偏移。有什么建议或替代解决方案吗?

最佳答案

您应该将两个图像合并为一个精灵,以避免闪烁。

关于html - 消除悬停时的div移位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44079754/

10-12 00:17
查看更多