CSS 小技巧：纯Css实现hover默认高亮显示

如上图，默认第一个标题高亮，在hover其他样式的时候，同步高亮显示：

1.鼠标滑过触发选中状态；
2.鼠标移出列表后仍然保留上一次的选中状态；（重点）
3.默认列表的第一项为选中状态；

很多人的第一反应是用js来控制样式，如果css能实现的功能，就没必要使用js啦，这里主要涉及css的transition属性的属性；

在vue项目中，可以参考一下demo

<template>
  <ul class="list">
    <li class="item"&gt;
      <h3 class="title"&gt;标题1</h3&gt;
    </li&gt;
    <li class="item"&gt;
      <h3 class="title">标题2</h3>
    </li>
    <li class="item">
      <h3 class="title">标题3</h3>
    </li>
    <li class="item">
      <h3 class="title">标题4</h3>
    </li>
  </ul>
</template>


<script setup>

</script>

<style lang="less" scoped>
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.item {
  position: relative;
  padding: 10px 10px 10px 34px;
  cursor: pointer;
  counter-increment: num;
}

.item:first-child .title {
  color: red;
  width: 100px;
}

.title {
  margin: 0;
  padding: 8px 0;
  font-weight: normal;
}

.item:hover .title {
  color: red;
}

/*默认transition*/
.item::before,
.item .title {
  transition: 0s .3;
}

.list:hover .title {
  transition: none;
  color: #333;
}

/*每一项hover*/
.item:hover .title {
  color: red;
  transition: none;
}</style>

代码007普通

打赏 收藏 海报 链接