使用伪类:focus实现点击元素后改变其css的那些事

茶一蛊

已于 2023-09-09 09:33:14 修改

阅读量560

点赞数

分类专栏： Vue3 css 文章标签： css 前端 vue

于 2023-06-01 13:23:11 首次发布

本文链接：https://blog.csdn.net/qq_26905813/article/details/130986249

版权

Vue3 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

文章讲述了在Vue3框架下，当:focus伪类无法对span或div等非表单元素起作用时，可以通过添加tabindex属性来解决这一问题。示例代码展示了如何在列表中，通过点击事件和tabindex改变元素样式，实现类似输入框获取焦点时的效果。

摘要由CSDN通过智能技术生成

众所周知，css的:focus伪类可以实现输入框获取焦点时改变输入框的样式。
然而在给span或div等标签使用的时候却达不到想要的效果。此时需要添加一个tabindex属性。
使用框架vue3

                      <ul>
									<li v-for="(item, index) in storeList" :key="index" class="labelItem">
										<span class="custom-tree-node" style="justify-content: left; font-weight: 400; margin-bottom: 10px">
											<el-icon><OfficeBuilding /></el-icon>
											<!-- :class="[item.selectedFlag ? 'labelPoint' : '']" -->
											<span class="label ml10 labelPoint" 
														style="cursor: pointer" 
														:tabindex="index" 
														@click="handleNodeClick(item, index)">
														{{item.storeName}}
											</span>
											<!-- <span class="code">{{ item.storeCode }}</span> -->
										</span>
									</li>
								</ul>