<分区>
标签 javascript html css image
<分区>
我有一个悬停图像的演示，它的颜色从灰色变为彩色。
但是，我的变色效果很粗糙，我想要更柔和的，比如渐变，缓入，缓出变色。
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
}
img:hover{
-webkit-filter: none;
filter: none;
}
.grid-item { width: 80px;
height: 80px ;
margin-bottom: 10px;
overflow:hidden;
}
.grid-item--width2 {
width: 400px;
}
</style>
<div class="grid">
<div class="grid-item">
<img src="https://mapchart.net/img/world-divided-population-map.png">
</div>
<div class="grid-item">
<img src="https://mapchart.net/img/world-divided-population-map.png">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script type="">
$(function(){
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 80,
gutter: 10
});
});
</script>
最佳答案
只需添加图像样式
img {
transition: all 0.5s ease;
}
关于javascript - 如何使颜色悬停变化更柔和？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59009711/