button按钮设置鼠标移入改变颜色

你可以通过 CSS 的 `:hover` 伪类来设置鼠标移入按钮时的样式，例如：

button:hover {
  background-color: blue;
  color: white;
}

这会将按钮的背景色设置为蓝色，文本颜色设置为白色，当鼠标移到按钮上时生效。你也可以根据需要修改颜色值来实现自己想要的效果。

相关问题

鼠标移入button改变样式

要实现鼠标移入按钮改变样式的效果，你可以使用CSS的:hover伪类选择器。首先，给按钮添加一个类或者ID，然后使用CSS样式来定义鼠标移入时的样式。

例如，假设你有一个按钮元素的HTML代码如下：

<button class="my-button">点击我</button>

你可以在CSS中定义如下样式：

.my-button {
  /* 按钮的默认样式 */
  background-color: #ccc;
  color: #fff;
}

.my-button:hover {
  /* 鼠标移入按钮时的样式 */
  background-color: #ff0000;
  color: #000;
}

在上面的例子中，按钮的默认背景颜色是灰色，文字颜色是白色。当鼠标移入按钮时，背景颜色变为红色，文字颜色变为黑色。

这样，当用户将鼠标移动到按钮上时，按钮的样式会发生改变。你可以根据需要自定义按钮的样式，包括背景颜色、文字颜色、边框等。

vue循环出来的div div里面有删除按钮 鼠标移入移出改变其中一个按钮的背景颜色

您可以使用Vue的事件绑定和条件渲染来实现鼠标移入移出改变按钮背景颜色的效果。具体做法是：

1. 给删除按钮绑定mouseenter和mouseleave事件，分别触发对应的处理方法。
2. 在数据模型中添加一个属性用来表示当前鼠标是否在按钮上。
3. 在模板中使用v-bind:class指令来动态绑定按钮的class，根据鼠标是否在按钮上来决定是否添加特定的class来改变背景颜色。

示例代码如下：

<template>
  <div v-for="(item, index) in list" :key="index">
    <div>
      {{item.text}}
      <button class="delete-button"
              @mouseenter="setButtonHover(true, index)"
              @mouseleave="setButtonHover(false, index)"
              @click="deleteItem(index)">
        删除
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {text: 'item1'},
        {text: 'item2'},
        {text: 'item3'},
      ],
      buttonHover: [],
    }
  },
  methods: {
    setButtonHover(hover, index) {
      this.$set(this.buttonHover, index, hover);
    },
    deleteItem(index) {
      this.list.splice(index, 1);
      this.$delete(this.buttonHover, index);
    },
  },
}
</script>

<style>
.delete-button:hover {
  background-color: gray;
}

.delete-button.hover {
  background-color: green;
}
</style>

在模板中使用v-bind:class来绑定按钮的class，根据buttonHover数组中的值来判断是否添加.hover类。用this.$set和this.$delete来更新数组中某个元素的值。使用的是Vue的响应式设置。注意删除元素时，也要删除按钮hover的状态。