Question

我自己找到了答案并将其发布在下面。

我正在尝试实现一个css精灵。我想在使用内联代码的同时通过悬停更改特定图像的背景（指向css精灵）。

我试过这个，但没效果。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
width="100" height="105"
style="background:url(y.png);hover{background:url('y.png') -20px -20px;">

我也尝试了这个，onmouseover / out功能，但无济于事：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==" width="100" height="105" style="background:url(x.png);"
onmouseover="background: url(y.png) -47px -45px;"
onmouseout="bg.src='x.png'">

我也尝试过上面没有css精灵位置，仍然无效。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==" width="100" height="105" style="background:url(x.png);"
onmouseover="bg.src='y.png';"
onmouseout="bg.src='x.png'">

最后，我尝试了这个：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
width="100" height="105"
style="background:url(x.png);"
onmouseover="this.style.background='y.png'"
onmouseout="this.style.background='x.png'">

出于我自己的原因，我想用内嵌代码做css-sprite图像悬停。

Answer 1

因此，如果您使用的是img代码，我认为定位背景是不合理的......您需要做的就是更改图片来源......

1）Css不会工作，因为你无法进行:hover状态内联..所以你需要javascript。

试试这个

＆＃13;

  <img src="http://www.guitarworld.com/sites/default/files/public/styles/article_detail_featured__622x439_/public/dimebag_2_3.jpg"width="200" height="205" onmouseover='this.src = "http://www.metalinjection.net/wp-content/uploads/2014/06/dimebag-darrell.jpg"' 
    onmouseout='this.src = "http://www.guitarworld.com/sites/default/files/public/styles/article_detail_featured__622x439_/public/dimebag_2_3.jpg"'/>

＆＃13;

只需替换您赢得的图像来源，您就会看到图像更改......就是您想要的那样???。

Answer 2

我已经解决了自己的问题。

神奇的短语是：“this.style.background ='url（sprite.png）-100px -100px';”

所需的代码是：

<img src="transparent-placeholder.png"
width="100" height="100" style="background:url(sprite.png) 0px -100px;"
onmouseover="this.style.background='url(sprite.png) -100px -100px';"
onmouseout="this.style.background='url(sprite.png) 0px -100px';">

用于更改css-sprite的bg图像的内联代码

我自己找到了答案并将其发布在下面。

2 个答案: