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后的顺序无关。