CSS 悬停答案不适用于我的代码
CSS hover answers not working for my code
我一直在尝试这里的几个答案,但 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>
您可以在 css
中使用 :before
来使用没有首字母 src=""
的悬停
.imgBox:before { content: url('preA.png');background-repeat: no-repeat; }
.imgBox:hover:before { content: url('post.png');background-repeat: no-repeat; }
您的 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>
我一直在尝试这里的几个答案,但 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>
您可以在 css
中使用:before
来使用没有首字母 src=""
的悬停
.imgBox:before { content: url('preA.png');background-repeat: no-repeat; }
.imgBox:hover:before { content: url('post.png');background-repeat: no-repeat; }
您的 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>