jquery翻转图像移出位置(jquery-hover)

Question

我是一个jquery新手，在图像定位方面有问题。我有一个jquery-hover函数，它获取图像的src属性并将其替换为一个名为"over“的属性的值。实际的图像替换工作正常，但是每当mouseenter事件激发时，翻转图像在y轴下方显示约10%。我正在寻找一个完全重叠的“替换”一个图像与另一个没有翻转图像出现在不同的位置。下面是函数：

function createRollovers()
{
    var origImg ="";
    $(".swapImage").hover (
    function() {
        origImg = ($(this).attr("src"));
        $(this).attr("src", ($(this).attr("over")));
    },
    function() {
       $(this).attr("src", origImg);
    }
 );
}

HTML格式如下：

<div id="rightSide">
    <img class="swapImage" over="images/principlesBar_hover.jpg"  src="images/principlesBar.jpg" />
    <img class="swapImage" over="images/processBar_hover.jpg"  src="images/processBar.jpg" />
    <img class="swapImage" over="images/productsBar_hover.jpg"  src="images/productsBar.jpg" />
</div>

我相信这是非常简单的东西，更有经验的人会在心跳中看到。提前感谢您的帮助。

Answer 1

你真的不需要JavaScript/jQuery来做这件事。尝试使用CSS :hover伪类来更改元素的背景图像。

Answer 2

是的，我同意阿特斯的观点。但是，CSS hover只适用于一些浏览器中的锚标签，例如IE6等。如果你想用简单的JS来实现这一点，你可以查看this link