如何在悬停时将元素添加到按钮答案

【问题标题】：How to add an element to a button on hover如何在悬停时将元素添加到按钮
【发布时间】：2021-06-17 07:04:00
【问题描述】：

我对 CSS 很陌生，我想知道是否可以在悬停按钮上显示一些内容（图像）。我会附上一张我想要的图片。提前谢谢你。

【问题讨论】：

【解决方案1】：

这是一种方法：

.btncontain {
  position: relative;
  width: 200px;
  height: 100px;
}

.button {
  border: 3px solid aqua;
  border-radius: 10%;
  width: 100px;
  margin: 20px;
  padding: 10px;
}

.button:hover{
  background-color: aqua;
color: white;
}

.button:before {
  content: "Normal";
}

.button:hover:before {
  content: "On Hover";
}

.btncenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bubble {
  width: 30px;
  display: none;
  z-index: -1;
}

.button:hover .bubble{
  display: block;
}

.bubbletop{  
  position: absolute;
  top: 25%;
  left: 85%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bubblebottom{
  position: absolute;
  top: 75%;
  left: 15%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="btncontain">

 <div class="btncenter">
  <button class="button">   <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
   <img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>

【讨论】：

非常感谢..我会试试的。