vue中如何设置鼠标经过切换样式
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后的顺序无关。
上一篇：
IDEA上Java项目控制台中文乱码