伪元素的过渡：after和：be不起作用

Question

我知道以前有人问过这个问题，但是我有一个特定的问题，我似乎无法将其与其他问题中回答的解决方案一起使用。

我有一个缩略图，并在其上方有一个：after播放图标，仅在悬停时显示它是视频，但是不透明度过渡仅对图像不起作用。

有人知道解决方案吗？

.play-icon:hover:after {
position:absolute;
cursor: pointer;
top:0; 
left:0;
content:'';
width: 100%;
height: 100%;
background: url("http://www.kiddyjunction.ca/support/images/ilightbox/light-skin/thumb-overlay-play.png");
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;   
z-index: 9999;
}

这里的小提琴

Answer 1

我假设<img>是您要在此处进行动画处理的内容，因此请向该元素添加过渡样式：

 :hover { text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .play-icon:hover:after { position:absolute; cursor: pointer; top:0; left:0; content:''; width: 100%; height: 100%; background: url("http://www.kiddyjunction.ca/support/images/ilightbox/light-skin/thumb-overlay-play.png"); background-repeat: no-repeat; background-position: center center; background-color: transparent; z-index: 9999; } .thumb-grid { display: block; width: 100%; padding: 0 0 0 0; margin: 5em 0 2.5em 0; list-style-type: none; background-color: transparent; } .thumb-grid:after { content:''; width: 0; display: block; clear: both; } .thumb-grid li { position: relative; cursor: pointer; overflow: hidden; width: 13%; margin: 0 8.75% 0 0; display: block; float: left; padding-bottom: 13%; } .thumb-grid li:nth-child(5n) { margin-right: 0; } .thumb-grid img { position: absolute; left: 0; top: 0; width: 100%; filter: url("data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .thumb-grid li:hover img { opacity: 0.5; } 

 <ul class="thumb-grid"> <li id="gallery" class="play-icon"> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> </ul> 

JSFiddle