站長資訊網(wǎng)如何保留 hover 的狀態(tài)？下面本篇文章給大家介紹一下不借助javascript保留hover狀態(tài)的方法，希望對(duì)大家有所幫助！
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動(dòng)化測試一體化協(xié)作工具：點(diǎn)擊使用
通常情況下，hover 是無法保存狀態(tài)的。鼠標(biāo)移入觸發(fā)額外樣式，一旦移出就還原了。
el:hover{ color: red }
這就意味著，如果需要保留hover的狀態(tài)，可能就不得不借助JS了，比如下面是某某書院的首頁排行榜效果
這里的主要交互有以下幾個(gè)
-
鼠標(biāo)滑過觸發(fā)選中態(tài)
-
鼠標(biāo)移出列表后仍然保留上一次的選中態(tài)（重點(diǎn)）
-
默認(rèn)列表的第一項(xiàng)為選中態(tài)
目前官網(wǎng)的實(shí)現(xiàn)也是通過JS實(shí)現(xiàn)的，事實(shí)上，僅僅通過 CSS也是可以完全做到的，需要用到transition延時(shí)的一些小技巧，一起看看吧。【推薦學(xué)習(xí)：css視頻教程】
一、鼠標(biāo)滑過觸發(fā)選中態(tài)
所有的一切都離不開布局。
假設(shè)列表HTML是這樣的
-
將軍，夫人喊你種田了
只是在休息室里打了個(gè)盹兒，一睜眼，竟然穿成了古代目不識(shí)丁的鄉(xiāng)下胖丫頭。 好吃懶做不說，還在村里橫行霸道。 十里八鄉(xiāng)沒人愿意娶她，好不容易買了個(gè)金龜婿，大婚之日竟讓人逃了。 惡霸老爹一怒之下去道上擄了個(gè)夫君給她。 就是……爹你擄的是不是有點(diǎn)不太對(duì)呀？ ＊ 婚后的蘇胖丫很忙。 忙著改造惡霸爹爹與惡霸弟弟。 忙著搶救貌美如花的神將夫君。 忙著養(yǎng)育三個(gè)小小惡霸小豆丁。 一不小心，將自己忙成了大燕最位高權(quán)重的一品女侯！
-
被奪一切后她封神回歸
【甜爽燃，團(tuán)寵，玄學(xué)】 司扶傾一睜眼，不僅被奪了氣運(yùn)，人人還讓她滾出娛樂圈。 重活一次，她只想咸魚躺，誰知現(xiàn)在圈內(nèi)人只知拉踩營銷，沒點(diǎn)真本事，不好好磨煉演技，這樣下去還能行？怎么也得收拾收拾。 司扶傾捏了捏手腕，動(dòng)了。 后來，網(wǎng)上瘋狂罵她不自量力倒貼郁曜，造謠她私生活不檢點(diǎn)，而—— 國際天后：今天我能站在這里，多虧了傾傾 top1男頂流：離我妹妹遠(yuǎn)點(diǎn)@郁曜 就連國際運(yùn)動(dòng)會(huì)官方：恭喜司扶傾拿下第13枚個(gè)人金牌，等一個(gè)退圈 當(dāng)天，全網(wǎng)癱瘓。 · 史書記載，胤皇年少成名，八方征戰(zhàn)，平天下，安宇內(nèi)，是大夏朝最年輕的帝王，他完美強(qiáng)大，心懷天下，卻因病死于27歲，一生短暫，無妻無妾，無子無孫，是無數(shù)人的白月光男神。 無人知曉，他再睜開眼，來到了1500年后。 這一次，他看見了他遙想過的盛世大夏。 · 不久后胤皇身份曝光，司扶傾得知偶像竟然就在身邊，她敬佩萬分，只想—— 司扶傾：努力奮斗，報(bào)效大夏！ 胤皇：以身相許 司扶傾：？？？ 我一心奮發(fā)上進(jìn)你卻想要我？ · 全能顏巔女神×殺伐清貴帝王 從全網(wǎng)黑到封神頂流，順便和男神1v1
...
簡單修飾一下
.list{ list-style: none; margin: 0; padding: 0; width: 400px; } .item{ position: relative; padding: 10px 10px 10px 34px; cursor: pointer; counter-increment: num; } .title::before{ content: counter(num) ' '; width: 25px; line-height: 30px; text-align: center; color: #fff; position: absolute; font-size: 14px; font-family: fantasy; left: 4px; background: center/100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA8CAMAAAAe9Wm0AAAAbFBMVEUAAACaov2SnPKXnvaXofiyuvuCjPOgqvi4vfiBjPSyuf6Ml/a0u/21vPtte/F/i/WTnfWNmPiyuv6Ik/Zue/GRnPinr/Wfp/Gyuv6Ml/ebo/KTnfOutfqEj/W3vvpue/G/xfd1gvN8iPRodfBFzp+BAAAAF3RSTlMAECA7U2BgdIiTn6Wsvr+/v9Df39/s/o6+GugAAAGPSURBVHjazdZhk4IgEAZgpS6z8iotPEBF8P//x1tJrTxQlrm5uff7MxubLBtF9sQfp+ywjRCJk+zLhPq6SUwuxokhp4/YT1SUVtWam4nSZObImyA2YXHZ022cYsirOzwYoYti7nJzuMOqeHPNvke5jxgP2DRNNqLSMzQQtXjUtv8cBTWiwqOqohcsKikt8ajkHI+4EGjEBWNnNGJ1jUe1Vp9YJLSSeKRkh0eyC0BdEJIBZ5J/h1TA/6SUOgcgjUdaT6gJQA0CjV85jFrq/ZU/UYtA7HFzG5iA1PcOMnbs0b7tU/mcCAhjO/NE52A8jmXKMHYdnukTzE141vhyGWaSTq97ksMQhOnEF8qYFJvXneDO++lU82VznG0giYDppBVzTTvIffdjZSGFVjA2JHeVuRDbopOC6TrJ7GUSx0a1vYGR8u1kQ5krce5hJAUjlRbuRtuyu8GFVopxZ6OtxW5wObU2P3Ewaby+jya6R7UYO+C3xpICbk3NFhptTToaZ6OtzS/WGm39iUdkmdFFv5pvdNPREWjicTcAAAAASUVORK5CYII=); } .title{ margin: 0; padding: 8px 0; font-weight: normal; } .sumary{ margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #666; font-size: 14px; color: 20px; height: 0; } .item::before{ content: ''; position: absolute; inset: 0; border-radius: 8px; opacity: 0; z-index: -1; background: linear-gradient(270deg, rgb(241, 236, 249) 0%, rgba(241, 236, 249, 0) 100%); }
效果如下
現(xiàn)在加上hover的效果
.item:hover .title{ color: rebeccapurple; } .item:hover .sumary{ height: 40px; } .item.item:hover::before{ opacity: 1; }
效果如下
很正常的hover效果，沒什么特別的，那如何在移出后仍然保留最后的狀態(tài)呢？接著往下看
二、保留hover的狀態(tài)
實(shí)現(xiàn)hover保留狀態(tài)需要用到這樣一個(gè)小技巧。
比如，給一個(gè)元素添加hover樣式
el:hover{ color: red }
如果我們給這個(gè)元素加一個(gè)延時(shí)
el{ transition-delay: 1s; }
那么，在鼠標(biāo)移入和移出時(shí)都會(huì)有延遲
接著，我們?cè)?hover的時(shí)候取消延時(shí)
el:hover{ color: red; transition-delay: 0s; }
那么，在鼠標(biāo)移入的時(shí)候會(huì)迅速響應(yīng)，移出的時(shí)候仍然會(huì)有延遲
到這里相信大家都明白了吧，如果把延時(shí)設(shè)置為足夠大，比如
el{ transition-delay: 9999s; }
這樣鼠標(biāo)在移出后，需要經(jīng)歷9999s后才會(huì)變?yōu)樵瓲睿簿拖喈?dāng)于保留了hover狀態(tài)
原理就是這樣，接下來看看實(shí)際應(yīng)用吧
三、鼠標(biāo)移出列表后仍然保留上一次的選中態(tài)
根據(jù)上面的原理，我們可以輕松的實(shí)現(xiàn)在hover后保留狀態(tài)，如下
/* 默認(rèn) transition */ .item::before, .item .sumary, .item .title{ transition: 0s 9999s; } /* 每一項(xiàng)hover */ .item:hover .title{ color: rebeccapurple; transition: none; } .item:hover .sumary{ height: 40px; transition: none; } .item.item:hover::before{ opacity: 1; transition: none; }
需要注意的是，由于是transition，所以所有的狀態(tài)變化都是需要支持過渡屬性的，比如隱藏sumary這里用的是height: 0而不是display:none，還有選中的背景色變化，由于background-image不支持過渡，所以換成了::before，然后單獨(dú)用opacity控制等等一些細(xì)節(jié)，效果如下
這樣在鼠標(biāo)離開后，之前狀態(tài)仍然是保留的。但是我們只需要保留上一次的，而不是所有的，如何處理呢？
這里需要換一種思路，可以這么做，鼠標(biāo)在移入整個(gè)列表的時(shí)候就清除所有的狀態(tài)，這樣就只有當(dāng)前hover的選項(xiàng)才會(huì)保留下來，有點(diǎn)類似于JS中的思維，先把所有的.current都移除，再給當(dāng)前項(xiàng)添加.current，實(shí)現(xiàn)如下
/* 清除所有hover */ .list:hover .title{ transition: none; color: #333; } .list:hover .sumary{ transition: none; height: 0; } .list:hover .item::before{ transition: none; opacity: 0; }
這樣就實(shí)現(xiàn)了鼠標(biāo)移出列表后仍然保留上一次的選中態(tài)的功能，有點(diǎn)像單選框的效果，只不過是hover觸發(fā)的，效果如下
四、默認(rèn)列表的第一項(xiàng)為選中態(tài)
下面來實(shí)現(xiàn)最后一個(gè)功能。
這個(gè)相對(duì)而言比較容易，需要用到:first-child偽類，可以匹配到第一個(gè)元素。
不過需要考慮的是優(yōu)先級(jí)的問題，這個(gè)是默認(rèn)狀態(tài)，權(quán)限應(yīng)該是最低的，其他hover樣式都應(yīng)該可以覆蓋它，所以可以放在最前面，如下
/* 初始狀態(tài)（第一個(gè)選中） */ .item:first-child .sumary{ height: 40px; } .item:first-child .title{ color: rebeccapurple; } .item:first-child::before{ opacity: 1; } /* 清除所有hover */ /* 每一項(xiàng)hover */
這樣就完美實(shí)現(xiàn)了文章開頭的效果
由于是 CSS 實(shí)現(xiàn)，多個(gè)列表也是完全復(fù)用的
完整代碼可以查看線上 demo：CSS keep hover(runjs.work)
五、總結(jié)一下
