0

所以我有一个带有背景图像的列表项。当用户将鼠标悬停在列表项上时，我希望背景项发生变化。我正在使用这个：

li       { width: 400px; height: 80px;
           background-repeat: no-repeat; background-position: 10px 10px;
           background-image: url('myimg.png'); }
li:hover { background-image: url('myimg-hover.png'); }

不幸的是，当您第一次查看页面并将鼠标悬停在某个项目上时，这会导致一些闪烁。

我宁愿将图像组合成一张图像，当您将鼠标悬停在列表项上时只需更改背景图像位置。

合二为一的图像宽 25 像素，高 50 像素，显示的图像只有 25 像素 x 25 像素。

我试过这个：

li       { background: url('mynewimg.png') 0 0; }
li:hover { background: url('mynewimg.png') 0 -25px; }

但这只是显示了整个图像，因为我的列表项太大，并且位置不正确。

有谁知道我该怎么做？

4

3 回答 3

2

我可以做什么：

<li class="icon"><i></i></li>

.icon {
  width:25px;
  height:50px;
  display:table-cell;
 vertical-alignment:middle;
}
.icon>i
{
  background:url();
  background-position:<value>px,<value>px
}
.icon:hover>i{
background-position: <value>px,<value>px
}

希望这个解决方案能解决您的问题。

于 2013-10-03T05:25:42.687 回答
1

你的 CSS 应该是：

li {
    width: 400px; height: 80px;
    background-repeat: no-repeat;
    background-size: 50px 50px; 
    background-position: 10px 10px;
    background-image: url('mynewim.png'); 
    background-origin: 0px 0px;
}
li:hover { 
   background-origin: 50px 0px; 
}

您必须明确设置大小，然后使用原点

于 2013-10-03T17:06:48.567 回答
0

如果没有 jsFiddle，我无法可视化该示例，但我认为您正在谈论图像精灵。查看http://css-tricks.com/css-sprites/了解有关它们的更多信息。

于 2013-10-03T02:37:23.343 回答