一、css实现。

代码：

<div @click="exitConnect()" class="exit_hover">
       <img class="exit1 mr10" :src="exit" style="width:20px;height:20px;" />
       <img class="exit2 mr10" :src="exitActive" style="width:20px;height:20px;" />断开连接
</div>

css：

.exit_hover .exit1{display:inline-block;}
.exit_hover .exit2{display:none;}
.exit_hover:hover .exit1{display:none;}
.exit_hover:hover .exit2{display:inline-block;}

二、js实现。

使用一个变量来表示鼠标移入或移出的状态，鼠标移入事件mouseenter，移出事件mouseleave，在这两个事件中来修改这个变量。

注意：移出事件别用mouseout。

代码：

<div @mouseenter="isExitHover=true" @mouseleave="isExitHover=false" class="menus">
       <img v-show="!isExitHover" :src="exit" style="width:16px;height:16px;" class="mr10" />
       <img v-show="isExitHover" :src="exitActive" style="width:16px;height:16px;" class="mr10" />断开连接
</div>

data：

            exit: require("@/assets/img/exit.svg"),
            exitActive: require("@/assets/img/exit_active.svg"),
            isExitHover:false,//是否悬浮到图标上