vue鼠标hover(悬停)改变background-color移入变色问题

想要实现鼠标hover（悬停）时改变元素的背景颜色，可以使用Vue的绑定事件@mouseover和@mouseout。具体步骤如下：

1. 首先，给需要实现鼠标悬停变色的元素绑定一个v-bind样式，样式名称可以是你自己定义的，例如hoverColor。同时，需要定义两个背景颜色变量，一个代表平时的背景颜色，另一个代表鼠标悬停时的背景颜色。

<template>
  <div class="container">
    <div class="box" :class="{hoverColor: isHover}" @mouseover="hover=true" @mouseout="hover=false">
      Hover Over Me
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHover: false,
      normalBGColor: "#f1f1f1",
      hoverBGColor: "#666"
    };
  }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
}
.hoverColor {
  background-color: #666;
  color: #fff;
}
</style>

1. 在template中绑定class属性，将绑定的样式设置为鼠标悬停时的样式。具体做法是通过一个计算属性isHover来判断当前鼠标是否悬停在元素上。只有在isHover为true时，才应用hoverColor样式。

<template>
  <div class="container">
    <div class="box" :class="{hoverColor: isHover}" @mouseover="isHover=true" @mouseout="isHover=false">
      Hover Over Me
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHover: false,
      normalBGColor: "#f1f1f1",
      hoverBGColor: "#666"
    };
  },
  computed: {
    hoverColor() {
      return this.isHover ? "hoverColor" : "";
    }
  }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
}
.hoverColor {
  background-color: #666;
  color: #fff;
}
</style>

以上就是实现Vue鼠标悬停变色的整个过程。

下面附上两个示例：

1. 用 Vue 实现鼠标hover切换图片的效果

<template>
  <div class="container">
    <img :src="currentImg" @mouseover="currentImg=hoverImg" @mouseout="currentImg=normalImg"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      normalImg: "https://placekitten.com/200/200",
      hoverImg: "https://placekitten.com/201/201",
      currentImg: "https://placekitten.com/200/200"
    };
  }
};
</script>

<style>
img {
  width: 200px;
  height: 200px;
}
</style>

1. 用 Vue 实现鼠标hover改变文字颜色的效果：

<template>
  <div class="container">
    <div class="box" :class="{hoverColor: isHover}" @mouseover="isHover=true" @mouseout="isHover=false">
      Hover Over Me
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHover: false,
      normalTextColor: "#333",
      hoverTextColor: "red"
    };
  },
  computed: {
    hoverColor() {
      return this.isHover ? "hoverColor" : "";
    }
  }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  color: #333;
}
.hoverColor {
  color: red;
}
</style>