Question

当我将鼠标悬停在图像上时，我正在使用代码来设置背景图像的边框。当我将鼠标悬停在图像上时，图像出现与边框太近的问题。我想像这样将图像移到中心：

https://i.imgur.com/9et5LIL.png

这是jsfiddle：https://jsfiddle.net/05xq2b3m/

我已经尝试了其中的每一个：

padding-left: 4px;
background-position: center center;
background-position: 2px;
margin-left: 2px;

它不会做任何事情，因为当我将鼠标悬停在图像上时，背景图像将靠近边框。我试图在Google上找到答案，但找不到解决方法。

这是完整的代码：

.a8r {
  margin-top: 12px;
  margin-left: 11px;
  height: 28px;
  width: 28px;
  border: none;
  display: inline-block;
}

.e1f600 {
  background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
}

.e1f600:hover {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15);
  width: 32px;
  height: 30px;
  background-position: center center;
}

<button aria-label="grinning face" string="1f600" class="e1f600 a8r">

我希望实现的是，当我将鼠标悬停在图像上时，我想将背景图像设置在不太靠近边框的中心。

您能给我一个例子，当我将鼠标悬停在图像上时，如何设置不会太靠近边框的背景图像吗？

谢谢。

Answer 1

更改背景位置
为元素提供背景色
以非悬停样式设置元素的大小

单独查看。您将以这种方式更加了解它。随时优化或最小化它。

.e1f600 { 
   background-image: url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png);
   background-position: center -11222px;
   background-repeat: no-repeat;
   background-color: transparent;
   width: 32px;
   height: 32px;
}

.e1f600:hover {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 0 3px 2px rgba(0,0,0,.15);
}

如何将背景图片移到悬停时远离边框的中心？

1 个答案: