實現鼠標移動移出改變樣式

忘記這個問題是哪里來的,記錄一下：

第一種：

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