css鼠标点击改变颜色,点其他的颜色又变回去,去除focus黑边框
:focus是点击之后的颜色变化,如果不把outline设置为0px,会有一个黑边框,不好看。首先要在v-for的div里面加tabindex=‘1’&:hover是鼠标移动到div上的颜色变化。
·
<div v-for="item in date" :key="item.id" class="div" tabindex="1">
<p>{{ item.name}}</p>
</div>
首先要在v-for的div里面加tabindex=‘1’
然后设置样式
.div {
&:focus {
color: yellow;
background-color: red;
outline: 0px;
}
&:hover {
color: yellow;
background-color: black;
}
}
&:focus是点击之后的颜色变化,如果不把outline设置为0px,会有一个黑边框,不好看
&:hover是鼠标移动到div上的颜色变化
更多推荐
已为社区贡献7条内容
所有评论(0)