Question

我一直在尝试从这里得到几个答案，但似乎没有一个对我有用，我做错了什么？我得到任何类似于期望的唯一一次是从div中的img开始，但后来我有多个（如果我使用不重复它再次停止盘旋）。

计划是从模糊到清晰度超过500毫秒或者其他东西但是现在我只是喜欢图像交换。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html><head>     
<style type='text/css'>
.imgBox { background-image: url('preA.png'); }
.imgBox:hover { background-image: url('post.png'); }
</style>
</head><body>    
<div class="imgBox">
<img src='preA.png' />
</div>    
</body>
</html>

Answer 1

除了作为占位符之外，您不需要img内的div标记，以确保div的尺寸合适。这是您的问题，因为该图像不会随您指定的CSS样式而消失。你可以这样做并解决你的问题。

＆＃13;

.imgBox { background: url('http://placehold.it/140/ffffff/000000') no-repeat; }
.imgBox:hover { background: url('http://placehold.it/140/000000/ffffff') no-repeat; }
.imgBox:hover img { visibility: hidden; }

＆＃13;

<div class="imgBox">
<img src='http://placehold.it/140/ffffff/000000' />
</div>

＆＃13;

Answer 2

您可以在css

中使用src=""，在没有初始:before的情况下使用悬停

.imgBox:before { content: url('preA.png');background-repeat: no-repeat; }
.imgBox:hover:before { content: url('post.png');background-repeat: no-repeat; }

FIDDLE DEMO

CSS悬停答案不适用于我的代码

2 个答案: