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

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

第一种:

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

  

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

上一篇:华为手机连接电脑的共享文件


下一篇:Android 基于ksoap2的webservice请求的学习