点击后切换样式

类似于淘宝放大镜底下小图的操作。即鼠标进入时当前div变红色，其他div保持

js实现方式

   第一种
	   var smallImg=document.getElementsByClassName("small");
	   for (var i=0; i<smallImg.length; i++)
	   {
	       smallImg[i].onmouseenter=function() {
	
	           for(var k=0;k<smallImg.length;k++)
	           {
	              smallImg[k].style.borderColor="transparent";
	           }
	           this.style.borderColor="red";
	       }
	data-url="./image/5b7cf1eeN9a440daf.jpg!cc_350x449.jpg
	   }

//    第二种
    var Whole=document.getElementsByClassName("whole")[0];
    var Big=document.getElementsByClassName("big")[0];
    var Middle=document.getElementsByClassName("middle")[0];
    var Middleimg=document.getElementsByClassName("middleimg")[0];
    var cengD=document.getElementsByClassName("ceng")[0];

    var borderred=document.getElementsByClassName("small");       //让第一个边框色默认为红色
    borderred[0].style.borderColor="#d40000";
    var borderredObject=borderred[0];         //声明一个全局变量，用它来存储上一次变化的量
    for(var i=0;i<borderred.length;i++){
        borderred[i].onmouseenter=function(){
            borderredObject.style.borderColor="transparent";    //在鼠标进入第二个小图时，第一个小图回到透明色
            this.style.borderColor="#d40000";       //在鼠标进入时使边框色为红色
            borderredObject=this;
            Middleimg.src=this.getAttribute("data-src");        //鼠标进入小图时，出现所对应的中图
            Middle.setAttribute("data-src",this.getAttribute("data-big"));      //鼠标进入中图时，出现所对应的大图
        }
    }

其实还有更简单的方法，在vue中可以使用动态class的方法。

<div class="box_small">
    <ul>
        <li :class="{box_smalllis:isclass==index}" v-for="(item,index) in imagesList" :key="index" @mouseenter="changeImage(index)">
            <img :src="item"/>
        </li>
    </ul>
</div>

//选中时有红色边框,class名称为box_smalllis
//:class="{box_smalllis:isclass==index}"   当isclass和index相等时添加box_smalllis类名称  :class="{box_smalllis:true}"
//初始isclass='',当鼠标进入时,他和索引就相等

changeImage(index) {
   this.isclass=index
},