固定按钮在悬停时移动时会加倍

Question

我正在使用 Vue js 制作一个网站，并想在右下角添加一个机器人助手按钮。但只要它是一个按钮，我希望它能以某种方式做出反应，所以在悬停时，我写了这样的：

.bot:hover {
  transition: transform 0.15s ease-in-out;
  transform: scale(2) translatey(-4.5vh);
}

如果每次鼠标放在这个按钮上时它不会自身加倍的话，它就会完美地工作。还有一些问题的代码和屏幕：

.bot {
  position: fixed;
  right: 2vw;
  bottom: 0;
  z-index: 100;
}

.bot:hover {
  transition: transform 0.15s ease-in-out;
  transform: scale(2) translatey(-4.5vh);
}

.bot:not(:hover){
  transition: transform 0.2s ease-in-out;
}

.v-img{
  width: 20vh;
}

<button>
  <div class="bot">
    <v-img
      src="../assets/bot.png"
    />
  </div>
  </button>

正如你所看到的，在大机器人后面有一个小机器人

我尝试删除 div，将类机器人从 div 移动到按钮，并将位置从固定更改为所有其他位置，使其不可见。在某些情况下没有任何改变，在某些情况下，它没有固定在左下角。

这是该机器人组件的完整代码：

<template>
  <button class="bot">
    <v-img
      src="../assets/bot.png"
    />
  </button>
</template>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bot {
  position: fixed;
  right: 2vw;
  bottom: 0;
  z-index: 100;
}

.bot:hover {
  transition: transform 0.15s ease-in-out;
  transform: scale(1.5) translatey(-2.5vh);
  background: none;
}

.bot:not(:hover){
  transition: transform 0.2s ease-in-out;
}

.v-img{
  width: 20vh;
}
</style>

Answer 1

只需使用mxplayer mod来代替这些问题。