时间戳

首页 > 解决方案 > 悬停时在按钮中显示图像

html - 悬停时在按钮中显示图像

问题描述

这是来自 W3Schools 的代码。它是一个动画按钮，当您将鼠标悬停时，它会在文本旁边显示一个窄。您可以在.button span:after {content: '\00bb'...}. 如何用我想要的任何图像替换窄 ('\00bb')？可能很容易，但我是新手，我无法弄清楚。谢谢你。

.button {
  border-radius: 4px;
  background-color: darkgreen;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

**.button span:after {
  content: '\00bb'**;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -100px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 55px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Animated Button</h2>

<button class="button"><span>Hover </button>

标签： htmlcss

解决方案

您的实际内容与某些角色有关。您可以在此处从字体加载不同的图标或上传图像。然后您必须将内容留空并将图像放在背景中。

content: "";
background:  url('../images/your-image.png') no-repeat;

推荐阅读