vue中如何设置鼠标经过切换样式
vue中如何设置鼠标经过切换样式第一步在需要设置样式的标签上加上mouseover和mouseout属性,代码如下<p class="content-p" @mouseover="addActive($event)" @mouseout="removeActive($event)">@可以替换为v-on:,不影响使用这里p标签的样式是“content-p”$event是指当前触发的是什
·
vue中如何设置鼠标经过切换样式
第一步
在需要设置样式的标签上加上mouseover和mouseout属性,代码如下
<p class="content-p" @mouseover="addActive($event)" @mouseout="removeActive($event)">
@可以替换为v-on:,不影响使用
这里p标签的样式是“content-p”
$event是指当前触发的是什么事件(鼠标事件,键盘事件等)
第二步
在vue的methods里添加addActive和removeActive方法,分别是
addActive($event) {
$event.currentTarget.className = 'content-p active'
},
removeActive($event) {
$event.currentTarget.className = 'content-p'
},
其中currentTarget指的是当前目标,$event.currentTarget可以选中当前的目标,并将className属性修改为想要的新属性,这里加入了一个active样式对content-p的属性值做了覆盖,同时在鼠标移走后触发removeActive事件,可以去除之前加入的样式
容易忽视的一个细节:
className后的类可以打乱顺序,但是在css中一定要按顺序写,如active和content-p的顺序不能颠倒。即权重一样的情况下后面声明的会覆盖前面声明的。
举个例子
<div class = "red blue">123</div>
<div class = "blue red">456</div>
<style>
.red{
color : red
}
.blue{
color:blue
}
</style>
这种情况,因为blue类比red后声明,所以123和456显示时都是蓝色,跟class后的顺序无关。
更多推荐
已为社区贡献1条内容
所有评论(0)