Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding

Bagaimana untuk mengekalkan keadaan tuding? Artikel berikut akan memperkenalkan kepada anda cara mengekalkan keadaan tuding tanpa menggunakan JavaScript. Saya harap ia akan membantu anda!

Biasanya, tuding tidak dapat menyelamatkan keadaan. Gaya tambahan dicetuskan apabila tetikus dialihkan masuk, dan dipulihkan sebaik sahaja tetikus dialihkan keluar.

el:hover{
  color: red
}

Ini bermakna jika anda perlu mengekalkan status hover, anda mungkin perlu menggunakan JS Sebagai contoh, berikut ialah kesan kedudukan halaman utama akademi tertentu

Interaksi utama di sini adalah seperti berikut

• Tetikus meluncur ke atas untuk mencetuskan keadaan yang dipilih

• Tetikus bergerak keluar daripada senarai Keadaan terakhir yang dipilih masih akan dikekalkan (penekanan)

• Item pertama dalam senarai lalai ialah keadaan yang dipilih

Pelaksanaan semasa laman web rasmi juga melalui JS boleh dicapai. Jom tengok. [Pembelajaran yang disyorkan: CSStutorial video csstransition]1. Tetikus meluncur ke atas untuk mencetuskan keadaan yang dipilih

Semuanya tidak dapat dipisahkan daripada reka letak.

Anggap senarai

seperti ini

HTML

Suaikan sahaja

    
•       

  将军，夫人喊你种田了

        

  只是在休息室里打了个盹儿，一睁眼，竟然穿成了古代目不识丁的乡下胖丫头。 好吃懒做不说，还在村里横行霸道。 十里八乡没人愿意娶她，好不容易买了个金龟婿，大婚之日竟让人逃了。 恶霸老爹一怒之下去道上掳了个夫君给她。 就是……爹你掳的是不是有点不太对呀？ ＊ 婚后的苏胖丫很忙。 忙着改造恶霸爹爹与恶霸弟弟。 忙着抢救貌美如花的神将夫君。 忙着养育三个小小恶霸小豆丁。 一不小心，将自己忙成了大燕最位高权重的一品女侯！

      
  
•       

  被夺一切后她封神回归

        

  【甜爽燃，团宠，玄学】 司扶倾一睁眼，不仅被夺了气运，人人还让她滚出娱乐圈。 重活一次，她只想咸鱼躺，谁知现在圈内人只知拉踩营销，没点真本事，不好好磨炼演技，这样下去还能行？怎么也得收拾收拾。 司扶倾捏了捏手腕，动了。 后来，网上疯狂骂她不自量力倒贴郁曜，造谣她私生活不检点，而—— 国际天后：今天我能站在这里，多亏了倾倾 top1男顶流：离我妹妹远点@郁曜 就连国际运动会官方：恭喜司扶倾拿下第13枚个人金牌，等一个退圈 当天，全网瘫痪。 · 史书记载，胤皇年少成名，八方征战，平天下，安宇内，是大夏朝最年轻的帝王，他完美强大，心怀天下，却因病死于27岁，一生短暂，无妻无妾，无子无孙，是无数人的白月光男神。 无人知晓，他再睁开眼，来到了1500年后。 这一次，他看见了他遥想过的盛世大夏。 · 不久后胤皇身份曝光，司扶倾得知偶像竟然就在身边，她敬佩万分，只想—— 司扶倾：努力奋斗，报效大夏！ 胤皇：以身相许 司扶倾：？？？ 我一心奋发上进你却想要我？ · 全能颜巅女神×杀伐清贵帝王 从全网黑到封神顶流，顺便和男神1v1

      
  ...

Kesannya adalah seperti berikut

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

Sekarang tambahkan kesan

hover

Kesannya adalah seperti berikut

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

Ia adalah kesan biasa

, tiada yang istimewa, jadi bagaimana pula dengan mengekalkan keadaan terakhir selepas dialih keluar? Kemudian baca

hover 2. Kekalkan status

hover Untuk mencapai status pengekalan

, anda perlu menggunakan helah kecil ini.

hoverSebagai contoh, tambahkan gaya

pada elemen

hover

el:hover{
  color: red
}

Jika kita menambah kelewatan pada elemen ini

Kemudian, akan berlaku kelewatan apabila tetikus bergerak masuk dan keluar

el{
  transition-delay: 1s;
}

Kemudian, kami membatalkan kelewatan apabila

hover

Kemudian, ia akan bertindak balas dengan cepat apabila tetikus dialihkan masuk, tetapi masih akan ada kelewatan apabila tetikus dialihkan keluar

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

Saya percaya semua orang memahaminya sekarang. Jika kelewatan ditetapkan kepada nilai yang cukup besar, Contohnya,

, selepas tetikus dialihkan keluar, ia perlu melalui

el{
  transition-delay: 9999s;
}

sebelum ia berubah kepada keadaan asalnya, yang bersamaan untuk mengekalkan keadaan

9999shover

Prinsipnya seperti ini, mari kita lihat aplikasi praktikal

3 dikekalkan selepas tetikus dialihkan keluar daripada senarai

Mengikut prinsip di atas, kita boleh dengan mudah melaksanakan Keadaan dikekalkan selepas

, seperti berikut:

hover

Ia sepatutnya ambil perhatian bahawa kerana ia adalah

/* 默认 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;
}

, semua perubahan keadaan

perlu menyokong atribut peralihan transition, seperti menyembunyikan Di sini kami menggunakan bukannya sumary, dan warna latar belakang yang dipilih berubah . Memandangkan height: 0 tidak menyokong peralihan, kami menukarnya kepada display:none, dan kemudian menggunakan background-image sahaja untuk mengawal beberapa butiran, dll. , kesannya adalah seperti berikut: ::beforeopacity

Dengan cara ini, selepas tetikus pergi, keadaan sebelumnya masih dikekalkan. Tetapi kita hanya perlu mengekalkan yang terakhir, bukan semuanya Bagaimana untuk menanganinya?

这里需要换一种思路，可以这么做，鼠标在移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会保留下来，有点类似于JS中的思维，先把所有的.current都移除，再给当前项添加.current，实现如下

/* 清除所有hover */
.list:hover .title{
  transition: none;
  color: #333;
}
.list:hover .sumary{
  transition: none;
  height: 0;
}
.list:hover .item::before{
  transition: none;
  opacity: 0;
}

这样就实现了鼠标移出列表后仍然保留上一次的选中态的功能，有点像单选框的效果，只不过是hover触发的，效果如下

四、默认列表的第一项为选中态

下面来实现最后一个功能。

这个相对而言比较容易，需要用到:first-child伪类，可以匹配到第一个元素。

不过需要考虑的是优先级的问题，这个是默认状态，权限应该是最低的，其他hover样式都应该可以覆盖它，所以可以放在最前面，如下

/* 初始状态（第一个选中） */
.item:first-child .sumary{
  height: 40px;
}
.item:first-child .title{
  color: rebeccapurple;
}
.item:first-child::before{
  opacity: 1;
}

/* 清除所有hover */

/* 每一项hover */

这样就完美实现了文章开头的效果

由于是 CSS 实现，多个列表也是完全复用的

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

五、总结一下

以上就是通过纯 CSS 实现保留鼠标滑过样式的全部技巧了，主要还是对transition-delay的灵活运用，下面总结一下

• 实现原理的利用transition-delay，让“还原”的时间足够长，这样就实现了保留hover状态的效果了

• 单选效果可以在鼠标移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会保留下来，有点类似于JS中的思维

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

当然，整个实现对于 CSS 以及选择器要求是相当高的，实际项目过程中可能并不如 JS 实现来的快，但是，CSS能够实现的又何必动用 JS呢？在我看来，JS就应该回归本职，专心处理数据逻辑交互，视觉方面全部交给CSS就行了，只是现在CSS还不够强大，实现需要用到很多奇技淫巧，但是，CSS现在已经在变得足够强大，比如:has伪类，相信未来CSS会越来越美好

（学习视频分享：css视频教程、web前端）

Atas ialah kandungan terperinci Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!