实现鼠标移动移出改变样式

忘记这个问题是哪里来的,记录一下：

第一种：

　　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";
   }
},