为什么我不能在 css 中对图像进行过渡？
卡尔
所以我有一个包含一些徽标的 div。当我将鼠标悬停在它们上面时，它们应该变成彩色而不是灰色并弹出，但由于某种原因过渡不起作用。
这是html中div的代码：
<div class="clients">
<img src="img/myob.png">
<img src="img/belimo.png">
<img src="img/LifeGroups.png">
<img src="img/Lilly.png">
<img src="img/Trustly.png">
<img src="img/Citrus.png">
</div>
css代码：
.clients{
width:100%;
height:120px;
background-color: #f1f1f1;
align-items: right;
justify-content: center;
}
.clients img{
display:inline-block;
margin-left: 100px;
width:100px;
height:100px;
padding: 15px 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
object-fit: contain;
filter: grayscale(100);
}
所以我使用过渡让图像弹出并变成彩色，但是当我悬停在上面时没有反应。
div的图片：
应该如何： 
阿宾塔哈
过渡适用于图像。检查以下代码段。
img {
width: 200px;
filter: grayscale(100);
transition: all 0.3s ease;
}
img:hover {
filter: grayscale(0);
}<span>
<img src="https://assets.dragoart.com/images/11939_501/how-to-draw-iron-man-easy_5e4c9ed9b16b58.14188289_53732_3_3.png" />
</span>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么我不能在CSS / HTML中添加简单的背景图像？
- 2
为什么我不能在 CSS 中调整此图像的大小？
- 3
为什么这个CSS可以进行演示，但不能在我的项目中进行？
- 4
为什么这个用于在悬停时反转颜色的 CSS 不能在我的图像上工作？
- 5
为什么我不能在 ListView 中修改 list-cell css？
- 6
为什么我不能在 CSS 中更改视频宽度？
- 7
为什么我不能在纯CSS幻灯片显示中添加新幻灯片？
- 8
为什么我的 CSS 过渡不能反向工作？
- 9
为什么我不能在 html 中全屏显示图像？
- 10
为什么我不能在CSS Variable中使用rgba？
- 11
为什么我不能在div标签中的网站上应用填充，我在其中将类定义为“容器流体”并编写了相同的CSS代码
- 12
为什么我不能在 Flatlist 中显示我的项目？
- 13
为什么我不能在 init 中获得我的 fetchedResults？
- 14
为什么我不能在图像上放置文字
- 15
为什么我不能在Stream上进行匹配？
- 16
为什么我不能在JavaScript中进行array [-1]？
- 17
为什么我不能在异步方法中调试代码？
- 18
为什么我不能在 chartjs 图表中更新宽高比？
- 19
ElasticSearch：为什么我不能在特定类型中搜索？
- 20
为什么我不能在JUnit中定义期望的ParseException？
- 21
为什么我不能在addEventListener中调用类函数
- 22
为什么我不能在ggplot中居中调整标题？
- 23
为什么我不能在Java中传递这样的数组
- 24
Java：为什么我不能在Comparator中抛出异常？
- 25
为什么我不能在 Postgres 中修改列类型
- 26
为什么我不能在熊猫函数中应用shift？
- 27
为什么我不能在Python中更改类的属性
- 28
为什么我不能在回调中调用useRef？
- 29
为什么我的线性渐变不能在Firefox中工作？
我来说两句