這篇文章主要為大家展示了如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供杭州網(wǎng)站建設(shè)、杭州做網(wǎng)站、杭州網(wǎng)站設(shè)計(jì)、杭州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、杭州企業(yè)網(wǎng)站模板建站服務(wù)，10年杭州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果

<div class="filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<style>
    .filter-div {
      width: 67px;
      height: 50px;
      background: #fff;
      &:hover {
          background: #5d7aae;
        }
    }
    .filter-img {
      width: 67px;
      height: 50px;
      &:hover {
         filter: brightness(100);
      }
    }
</style>

鼠標(biāo)沒(méi)有放上之前
無(wú)Hover

鼠標(biāo)放上之后
有Hover

這里用到css filter:brightness(100)給圖片應(yīng)用一種線性乘法，使其看起來(lái)更亮或更暗。如果值是0%或者0，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過(guò)100%也是可以的，圖像會(huì)比原來(lái)更亮。如果沒(méi)有設(shè)定值，默認(rèn)是1，如果想染圖片設(shè)置成白色，值為100。

因?yàn)閭鹘y(tǒng)的hover給img換src第一次hover的時(shí)候會(huì)讓圖片閃白，因?yàn)樾枰匦录虞d圖片，這樣做的好處就是圖片只需要加載一次，當(dāng)然這種做法也是有局限性的。

以上就是關(guān)于“如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://jinyejixie.com/article16/dedggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、外貿(mào)建站、Google、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)