javascript - 用于更改 css-sprite 的背景图像的内联代码

Question

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

我正在尝试实现一个 CSS Sprite 。我想通过悬停来更改特定图像的背景(指向 CSS Sprite )，同时使用内联代码。

我试过了，没用。

<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 sprite 位置的方法，仍然不起作用。

<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。

试试这个

  <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"'/>

只需替换您的图像源，您就会看到图像发生变化...这就是您想要的吗？？？。