css实现鼠标滑过改变背景图片

css实现鼠标滑过改变背景图片
 

 ....适用于按钮之类

<template>
 
    <div class="slip">
      <img src="../assets/logo.png" class="slip_1" />
      <img src="../assets/logo1.png" class="slip_2" />
    </div>
 
</template>
<style scoped >
/* 滑动变图片  用于按钮   img */
/* 父 */
.slip {
  width: 140px;
  height: 140px;
  position: relative;
  display: block;
}
/* 子 */
.slip_1 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
}
.slip_2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  display: none;
  bottom: 0;
  margin: 0;
  padding: 0;
}
/* 鼠标滑动到父 子变图片 */
.slip:hover .slip_2 {
  display: block;
}
</style>