Question

我正在使用website，用户可以在其中选择一个图标并将其作为请求发送给我的某个机器人。

我已经整理好了。我主要是在努力改善美学。

我想要发生的是，当鼠标悬停在一个图标上（甚至选择它）时，它会显示一个浅蓝色的背景颜色，表明它已被选中，因为现在没有任何东西可以指示所选的图标，除了顶部的div（当你向下滚动时并不总是在视线中）。

我的代码是：

.flair:hover, .selected{
        background-color: #3498db;
        border-radius: 2px;
    }

我尝试添加一些填充，但由于每个图像都在spritesheet中，它将与其他图像重叠。

我也尝试使用边框来模拟相同的效果，但是悬停在图像上会因为应用了边框而轻微移动其他图像，这会让人讨厌。

有没有什么方法可以让我的背景颜色在图像后面“溢出”？

Answer 1

如何添加透明边框添加开头作为占位符并更改边距，因为边框会添加一些空间

.flair {
  border: 2px solid transparent;
  background-clip : padding-box;
  margin-right:6px;
  margin-top:6px;
}

然后在悬停时用一些额外的光晕为它着色

.flair:hover {
  box-shadow: 0 0 10px #3498db;
  border: 2px solid #3498db;
}

Answer 2

请试试这个：

.flair:hover, .selected {
  border: 1px solid #3498db;
  border-radius: 2px;
  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

如何在悬停时在spritsheet图像后面“溢出”背景颜色？

2 个答案: