How to retain the hover state? The following article will introduce to you how to retain the hover state without using JavaScript. I hope it will be helpful to you!

Normally, hover cannot save the state. Additional styles are triggered when the mouse is moved in, and restored once the mouse is moved out.

el:hover{
??color:?red
}

This means that if you need to retain the status of hover, you may have to resort to JS. For example, the following is the ranking effect of the home page of a certain academy

The main interactions here are as follows

• The mouse slides over to trigger the selected state

• The last selected state will remain after the mouse is moved out of the list (emphasis added)

• The first item in the default list is selected

The current implementation of the official website is also implemented through JS. In fact, it can be completely achieved only through CSS, and some small delays of transition are required. Let’s take a look at the techniques. [Recommended learning: css video tutorial]

1. The mouse slides over to trigger the selected state

Everything is inseparable from layout.

Assume the listHTML is like this

????
• ??????

  將軍，夫人喊你種田了

  ??????

  只是在休息室里打了個盹兒，一睜眼，竟然穿成了古代目不識丁的鄉(xiāng)下胖丫頭。?好吃懶做不說，還在村里橫行霸道。?十里八鄉(xiāng)沒人愿意娶她，好不容易買了個金龜婿，大婚之日竟讓人逃了。?惡霸老爹一怒之下去道上擄了個夫君給她。?就是……爹你擄的是不是有點不太對呀？?＊?婚后的蘇胖丫很忙。?忙著改造惡霸爹爹與惡霸弟弟。?忙著搶救貌美如花的神將夫君。?忙著養(yǎng)育三個小小惡霸小豆丁。?一不小心，將自己忙成了大燕最位高權(quán)重的一品女侯！

  ????
??
• ??????

  被奪一切后她封神回歸

  ??????

  【甜爽燃，團(tuán)寵，玄學(xué)】?司扶傾一睜眼，不僅被奪了氣運，人人還讓她滾出娛樂圈。?重活一次，她只想咸魚躺，誰知現(xiàn)在圈內(nèi)人只知拉踩營銷，沒點真本事，不好好磨煉演技，這樣下去還能行？怎么也得收拾收拾。?司扶傾捏了捏手腕，動了。?后來，網(wǎng)上瘋狂罵她不自量力倒貼郁曜，造謠她私生活不檢點，而——?國際天后：今天我能站在這里，多虧了傾傾?top1男頂流：離我妹妹遠(yuǎn)點@郁曜?就連國際運動會官方：恭喜司扶傾拿下第13枚個人金牌，等一個退圈?當(dāng)天，全網(wǎng)癱瘓。?·?史書記載，胤皇年少成名，八方征戰(zhàn)，平天下，安宇內(nèi)，是大夏朝最年輕的帝王，他完美強大，心懷天下，卻因病死于27歲，一生短暫，無妻無妾，無子無孫，是無數(shù)人的白月光男神。?無人知曉，他再睜開眼，來到了1500年后。?這一次，他看見了他遙想過的盛世大夏。?·?不久后胤皇身份曝光，司扶傾得知偶像竟然就在身邊，她敬佩萬分，只想——?司扶傾：努力奮斗，報效大夏！?胤皇：以身相許?司扶傾：？？？?我一心奮發(fā)上進(jìn)你卻想要我？?·?全能顏巔女神×殺伐清貴帝王?從全網(wǎng)黑到封神頂流，順便和男神1v1

  ????
??...

Simple modification

.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%);
}

The effect is as follows

Now add the effect of hover

.item:hover?.title{
??color:?rebeccapurple;
}
.item:hover?.sumary{
??height:?40px;
}
.item.item:hover::before{
??opacity:?1;
}

The effect is as follows

##Very normal

hover effect, Nothing special, so how to retain the last state after moving out? Then read on

2. Retain the status of

hover

You need to use such a little trick to achieve

hover retention status.

For example, add a

hover style to an element

el:hover{
??color:?red
}

If we add a delay to this element

el{
??transition-delay:?1s;
}

Then, there will be a delay when the mouse moves in and out

Then, we cancel the delay when

hover

el:hover{
??color:?red;
??transition-delay:?0s;
}

Then, the mouse will respond quickly when moving in, and there will still be a delay when moving out.

I believe everyone understands this, if the delay is set to enough Large, such as

el{
??transition-delay:?9999s;
}

, after the mouse is moved out, it needs to go through

9999s before it changes to its original state, which is equivalent to retaining the hover state

The principle is like this, let’s take a look at the actual application

3. After the mouse is moved out of the list, the last selected state will still be retained

According to the above Principle, we can easily achieve retaining the state after

hover, as follows

/*?默認(rèn)?transition?*/
.item::before,
.item?.sumary,
.item?.title{
??transition:?0s?9999s;
}
/*?每一項hover?*/
.item:hover?.title{
??color:?rebeccapurple;
??transition:?none;
}
.item:hover?.sumary{
??height:?40px;
??transition:?none;
}
.item.item:hover::before{
??opacity:?1;
??transition:?none;
}

It should be noted that since it is

transition, so all state changes All need to support transition attributes , such as hiding sumary here is height: 0 instead of display:none, and the selected background Color change, because background-image does not support transition, so I changed it to ::before, and then used opacity alone to control some details, etc. The effect is as follows

In this way, after the mouse leaves, the previous state is still retained. But we only need to keep the last one, not all of them. How to deal with it?

這里需要換一種思路，可以這么做，鼠標(biāo)在移入整個列表的時候就清除所有的狀態(tài)，這樣就只有當(dāng)前hover的選項才會保留下來，有點類似于JS中的思維，先把所有的.current都移除，再給當(dāng)前項添加.current，實現(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;
}

這樣就實現(xiàn)了鼠標(biāo)移出列表后仍然保留上一次的選中態(tài)的功能，有點像單選框的效果，只不過是hover觸發(fā)的，效果如下

四、默認(rèn)列表的第一項為選中態(tài)

下面來實現(xiàn)最后一個功能。

這個相對而言比較容易，需要用到:first-child偽類，可以匹配到第一個元素。

不過需要考慮的是優(yōu)先級的問題，這個是默認(rèn)狀態(tài)，權(quán)限應(yīng)該是最低的，其他hover樣式都應(yīng)該可以覆蓋它，所以可以放在最前面，如下

/*?初始狀態(tài)（第一個選中）?*/
.item:first-child?.sumary{
??height:?40px;
}
.item:first-child?.title{
??color:?rebeccapurple;
}
.item:first-child::before{
??opacity:?1;
}

/*?清除所有hover?*/

/*?每一項hover?*/

這樣就完美實現(xiàn)了文章開頭的效果

由于是 CSS 實現(xiàn)，多個列表也是完全復(fù)用的

完整代碼可以查看線上 demo：CSS keep hover(runjs.work)

五、總結(jié)一下

以上就是通過純 CSS 實現(xiàn)保留鼠標(biāo)滑過樣式的全部技巧了，主要還是對transition-delay的靈活運用，下面總結(jié)一下

• 實現(xiàn)原理的利用transition-delay，讓“還原”的時間足夠長，這樣就實現(xiàn)了保留hover狀態(tài)的效果了

• 單選效果可以在鼠標(biāo)移入整個列表的時候就清除所有的狀態(tài)，這樣就只有當(dāng)前hover的選項才會保留下來，有點類似于JS中的思維

• 需要注意所有屬性必須是支持transition的，比如display：none就不支持transition，需要用其他樣式代替

當(dāng)然，整個實現(xiàn)對于 CSS 以及選擇器要求是相當(dāng)高的，實際項目過程中可能并不如 JS 實現(xiàn)來的快，但是，CSS能夠?qū)崿F(xiàn)的又何必動用 JS呢？在我看來，JS就應(yīng)該回歸本職，專心處理數(shù)據(jù)邏輯交互，視覺方面全部交給CSS就行了，只是現(xiàn)在CSS還不夠強大，實現(xiàn)需要用到很多奇技淫巧，但是，CSS現(xiàn)在已經(jīng)在變得足夠強大，比如:has偽類，相信未來CSS會越來越美好

（學(xué)習(xí)視頻分享：css視頻教程、web前端）

The above is the detailed content of CSS tip: Use transition to retain hover state. For more information, please follow other related articles on the PHP Chinese website!