Question

<!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/

Answer 1

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

Answer 2

你的代码没有任何问题，它可以工作，但我相信使用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复制新的CSS和图像如果您正在使用spriteme.org，它们将在运行中创建。有很多方法可以创建或编辑图像...

我希望我的回答对你有帮助，

快乐编码

使用CSS将鼠标悬停在上方时更改图像

2 个答案: