如何在悬停时更改背景图像？

Posted 2023-05-08

【中文标题】如何在悬停时更改背景图像？

【英文标题】：How to change background image in hover?

【发布时间】：2013-11-02 07:26:51

【问题描述】：

我正在使用的图像文件是.png file，它由两个不同颜色（蓝色/橙色）的相同对象创建。 .png 文件中的对象彼此相邻。 我想要做的是将背景图像设置为 .png（蓝色）的左侧部分并悬停在右侧部分（ .png 的橙色）。我知道当 .png 中的对象在彼此之下时它是如何工作的 示例：

.facebook_ico 
  background : transparent url('img/social-icons.png') bottom right no-repeat;


.facebook_ico:hover 
  background : transparent url('img/social-icons.png') top right no-repeat;

但是如果对象彼此相邻，这将如何工作？

为避免任何误解，我正在寻找一种方法来使用具有多个对象的背景图像彼此相邻（在本例中为 2）。这是可能的还是我需要让它们在彼此之下才能在hover 中更改它们？

【参考方案1】：

.facebook_ico 
  background: transparent url('img/social-icons.png') bottom left no-repeat;


.facebook_ico:hover 
  background-position: bottom right;

【讨论】：

谢谢但不起作用，左侧的背景图像（蓝色）移动到右侧的hover

@Teo 现在是你想要的吗？

对不起，如果我不清楚，我试图找出的不是如何使用 div 的左/右侧，而是图像 png 的左/右侧。

【参考方案2】：

试试这个

.facebook_ico 
  background : transparent url('img/social-icons.png') top left no-repeat; width:30px; height:30px


.facebook_ico:hover 
  background : transparent url('img/social-icons.png') top right no-repeat;width:30px; height:30px
 

【参考方案3】：

使用background-position:

.something 
   background-position: 0px 0px;


.something:hover 
   background-position: 20px 0px

设置值以匹配图标的大小。

【参考方案4】：

就像说你可以使用

.facebook_ico 
  background : transparent url('img/social-icons.png') top left no-repeat;


.facebook_ico:hover 
  background-position : top right;
 

如果它被截断，最好使用像素值来获得准确的背景

.facebook_ico 
  background : transparent url('img/social-icons.png') top 0px no-repeat;


.facebook_ico:hover 
  background-position : top 120px;