如何在悬停时向按钮添加元素

问题描述

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

解决方法

这是一种方法：

.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%);
}

.bubblebottom{
  position: absolute;
  top: 75%;
  left: 15%;
  -ms-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>