javascript - 需要更改背景位置 onMouseOver

Question

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

button1.png 是一个 180 像素高的精灵，由两个效果部分组成。由于我无法控制的非自然力量，我必须使这项工作内联。我知道这不是最佳实践，我对自己感觉很糟糕，但现在我只需要它来工作。请和谢谢！

Answer 1

一种方法是使用这样的 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 元素。

Answer 2

尝试这样的事情。

<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='-55px 0px';" onMouseOut="document.getElementById('button1Inline').style.backgroundPosition='0px 0px';">
    <div id="button1Inline" style="background-image:url(110crunchglovesi.png);width:55px;height:110px;background-position:0px 0px"
</a>

Answer 3

您应该在 img 标签的 src 中放置一个空的 1px x 1px gif。“ads/button1.png”图像应作为背景图像放置在 img CSS 中。