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

Question

我一直在尝试这里的几个答案，但 none 似乎对我有用，我做错了什么？我唯一一次得到与期望相似的东西是从 div 中的 img 开始，但后来我有多个（如果我使用 no-repeat 它会再次停止悬停）。

计划是在 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

您可以在 css

中使用 :before 来使用没有首字母 src="" 的悬停

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

FIDDLE DEMO

Answer 2

您的 div 中不需要 img 标签，除了作为占位符以确保 div 大小正确。这是您的问题，因为该图像不会随着您指定的 CSS 样式消失。你可以让它这样做并解决你的问题。

.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; }

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

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

CSS hover answers not working for my code

css

hover