問題描述

網(wǎng)站地址是 http://ideaware.co/ ，實(shí)際效果在第五頁(yè)。

截圖如下

求助鼠標(biāo)放上去時(shí)顏色變化是如何實(shí)現(xiàn)的呢。

問題解答

謝邀，看別人實(shí)現(xiàn)效果，css的話比較好查看。打開chrome去查看元素，看它的樣式是受什么css控制的。

.icon { filter: url(data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=… 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale); filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}回答3：

/* line 943, ../src/css/_layout.scss */section#clients .clientLogo span img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-transition: -webkit-filter 0.8s; -moz-transition: -moz-filter 0.8s; -o-transition: -o-filter 0.8s; transition: filter 0.8s; margin: 0 auto; max-height: 45px; max-width: 200px;}/* line 957, ../src/css/_layout.scss */section#clients .clientLogo span:hover img { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%);}

查看源css