0 
<!DOCTYPE html>
<html>
<head>
<style>

.main {
    background-image: url('a.jpg');
}

.main:hover {
    background-image: url('b.jpg');
}
</style>

</head> 
<body>
    <div class="main">
    </div>
</body>
</html>

当我加载页面时，我的 a.jpg 根本没有出现，因此没有悬停效果

我的代码有问题吗？

http://jsfiddle.net/ZH9EL/6/

4

2 回答 2

0

您的代码没有任何问题。第一个图像被重定向到主网站，因此您没有加载图像。您必须在本地托管它。我使用了不同的图像，它可以工作。

于 2013-07-18T02:40:54.990 回答
0

不，您的代码没有任何问题，它可以工作，但我相信使用 2 张图片是有风险的，如果 1 张没有加载，它将无法工作......

您想使用两个图像，但是如果悬停图像需要很长时间才能加载或根本不加载，它将无法很好地工作..

您可能想尝试Alois Mahdal 的回答：https ://stackoverflow.com/a/19967062/3217130请阅读他们的回复。

你的CSS应该是这样的：

        <style>
        #main {
            width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
            background: url('a-b.jpg') no-repeat left top;
        }
        #main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
        </style>

这将起作用，并且将正常加载并同时悬停，因此您不会遇到 dns 或服务器延迟问题以及如果未加载图像可能会使页面看起来难看的其他问题...

请尝试Alois Mahdal 的回答，这对你有用，如果你不明白如何为你的图像创建这个（ab.jpg 和新的更小但更好的代码），那么我想告诉你如何用你的图像做到这一点和类以及您需要的结果.. 我使用Paint .NET创建精灵，或者我使用spriteme.org优化正在运行的网站上的 CSS 如果您使用spriteme.org ，您可以复制新的 css 和图像，它们将即时创建. 有很多方法可以创建或编辑图像...

希望我的回答对你有帮助

快乐编码

于 2014-05-08T22:42:21.880 回答