使用一個背景圖像位置來切換圖像

所以我有一個背景圖像的列表項。當用戶將鼠標懸停在列表項上時，我想要更改背景項。我正在使用：使用一個背景圖像位置來切換圖像

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'); }

不幸的是，當您第一次查看頁面並將鼠標懸停在某個項目上時，會導致一些閃爍。

我寧願將圖像合併到一個圖像中，只是在將鼠標懸停在列表項上時更改背景圖像的位置。

組合成一個的圖像寬25px，高50px，圖像顯示只有25px x 25px。

我嘗試這樣做：

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

但是，這只是顯示整幅圖像，因爲我的列表項是如此之大，並且不定位是正確的。

任何人都知道我該怎麼做？

來源

2013-10-03 Steven

怎麼樣的jsfiddle玩，所以我們可以看到標記和腳本？ – DevlshOne

我能做些什麼，如：

<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-03 05:25:42

沒有jsFiddle我不能想象這個例子，但我想你是在談論圖像精靈。請查看http://css-tricks.com/css-sprites/瞭解更多關於它們的信息。

來源

2013-10-03 02:37:23

他使用sprite的想法作爲第二選項，他需要做jsfiddle，所以我們可以給他一個更好的解決方案。 –

你的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-03 17:06:48 vals

使用一個背景圖像位置來切換圖像

回答

相關問題