如上图,默认第一个标题高亮,在hover其他样式的时候,同步高亮显示:
1.鼠标滑过触发选中状态;
2.鼠标移出列表后仍然保留上一次的选中状态;(重点)
3.默认列表的第一项为选中状态;很多人的第一反应是用js来控制样式,如果css能实现的功能,就没必要使用js啦,这里主要涉及css的transition属性的属性;
在vue项目中,可以参考一下demo
<template>
<ul class="list">
<li class="item">
<h3 class="title">标题1</h3>
</li>
<li class="item">
<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>