js实现鼠标移入移出改变图片路径问题

刚开始一直在用js尝试mouseover和mouseout这俩属性，结果根本不起作用。换成mouseenter和mouseleave，成功。

实现效果：

• 移入前
  

• 移入后
  

代码：

<div class="detaiBtns">
		<div>没有了</div>
		<div class="detailReturn" @mouseenter="mouseEnter()" @mouseleave="mouseLeave()">
			<img :src="imgURL">
			<span>返回列表</span>
		</div>
		<div>网络安全专员</div>
</div>
<script>
	import img1 from '../../../assets/image/img/join-status.png'
	import img2 from '../../../assets/image/img/join-status1.png'
	export default {
		data() {
			return {
				imgURL: img1
			}
		}
	}
</script>
<style>
.detaiBtns {
		height: 71px;
		background: #FFFFFF;
		border-radius: 2px;
		margin-top: 36px;
		display: flex;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	.detaiBtns div {
		width: 33.5%;
		height: 71px;
		font-size: 20px;
		font-weight: 400;
		line-height: 71px;
		text-align: center;
		color: #333333;
		border: 1px solid #EEEEEE;
	}

	.detaiBtns div:hover {
		background: #008BEC;
		color: #FFFFFF;
	}

	.detaiBtns div:nth-child(2) img{
		display: inline-block;
		width: 21px;
		height: 19px;
		vertical-align: middle;
		margin-right: 13px;
	}	
</style>

我这里用的图片是导入的方式动态传，不然可能显示不出来

import img1 from ‘…/…/…/assets/image/img/join-status.png’
import img2 from ‘…/…/…/assets/image/img/join-status1.png’

return {
imgURL: img1
}

<img :src="imgURL">