忘记这个问题是哪里来的,记录一下：
第一种：
JavaScript实现，当鼠标放入时，所有文本框样式为onMouseEvent,当鼠标移出时，所有的文本框的样式改变为onMouserOver
第二种：
Jquery实现
$(document).ready(function () {
//默认情况下样式
$("input:text").attr("style","border:1px solid #7E9DB9;");
//鼠标移入样式
$("input:text").mouseover(function () {
$(this).attr("style","border:1px solid #EDBB72;");
});
//鼠标移开样式
$("input:text").mouseout(function () {
$(this).attr("style","border:1px solid #7E9DB9;");
});
});
第三种：
CSS3实现：
使用:hover效果,对于可以成块的效果更好
第四种：
Vue实现（等Vue3.0出来之后在更新,看一下有没有什么特殊的变化）：
在需要的地方用指令绑定两个方法
v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"
然后在method里面实现这两个方法
methods:{
changeActive($event){
$event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan active";
},
removeActive($event){
$event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan";
}
},
原文：https://www.cnblogs.com/yinxuejunfeng/p/9759831.html