变化图像时悬停，使用CSS

<!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 didnt出现在所有的，因此没有悬停效果变化图像时悬停，使用CSS

它说的是错我的代码？

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

来源

2013-07-18 Ryan

我改变了主div的大小和它的工作就好了。再次尝试您的JSFiddle，看看您是否得到相同的结果。 – GJK

你能告诉我代码吗？你所做的改变？ – Ryan

对不起，我显然不知道如何使用JSFiddle。这里是：http://jsfiddle.net/ZH9EL/3/ – GJK

没有什么是你的代码错误。第一张图片正在重定向到主网站，因此您没有加载图片。您将不得不在本地托管它。我使用了不同的图像，它的工作原理。

来源

2013-07-18 02:40:54 LUKE

http://jsfiddle.net/fstreamz/BSAmk/ – LUKE

没有没有什么不对您的代码，它可以工作，但我相信这是冒险使用2幅图像，如果1没有加载它不会工作...

你想使用两个图像，但如果悬停形象正在长加载或只是不加载在所有它不会很好地工作..

你可能想尝试阿洛伊斯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他们将b e在飞行中创建。有很多方法可以创建或编辑图片很多的...

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

快乐编码

来源

2014-05-08 22:42:21 jagb

你可以使用完整的http地址来映像或./ab.jpg以确保图像的路径是正确的.. – jagb

变化图像时悬停，使用CSS

回答

相关问题