忘记这个问题是哪里来的,记录一下:
第一种:
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"; } },