需要更改背景位置onMouseOver

-1

<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='0px -90px';"> 
    <img src="ads/button1.png" id="button1Inline" /> 
</a>

button1.png是一个180像素高的精灵，由两个效果半部组成。由于超出我的控制力的非自然力量，我必须使这项工作联机。我知道这不是最佳实践，我对自己感到很难过，但现在我只需要它的工作。请和谢谢！需要更改背景位置onMouseOver

来源

2012-12-19 NominalAeon

Ooooh，你想改变图片标签的背景位置吗？那怎么样为你工作？ – adeneo

我不知道，通常我会用CSS或带有锚点或容器标签的悬停效果做到这一点。所以我应该在锚上使用背景图片并将文本缩进设置为-9999px？ – NominalAeon

的一种方式，可以有这样的HTML：

<a href="#" id="button1"></a>

而且你可以给它的CSS属性，如display: block;或display: inline-block;与图像的宽度和它的高度的一半然后是:hover风格。

例如：

#button1 { 
    display: block; 
    width: 180px; /* assuming it's square */ 
    height: 90px; 
    background: url(<path_to_images>/button1.png) top left no-repeat transparent; 
    background-position: 0 0; 
} 
#button1:hover { 
    background-position: 0 -90px; 
}

这样，你不需要任何JavaScript，并且没有副作用。

还记得background-position只适用于设置了background-image的HTML元素。

来源

2012-12-19 16:51:36 Meta

我听到你在说什么，我一直在用CSS做这件事，所以我意识到这个表面上看起来像个愚蠢的问题。不幸的是，我需要这个内联工作，并且

需要更改背景位置onMouseOver

回答