Question

我是一个jquery noob并且在图像保持原位方面遇到了麻烦。我有一个jquery-hover函数，它抓取图像的src属性，并将其替换为名为“over”的属性值。实际图像替换正常工作，但只要鼠标中心事件触发，翻转图像就会沿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

是的，我同意Ates的意见。但是，CSS悬停只适用于某些浏览器中的锚标签，即IE6等。如果你想用简单的JS实现它，你可以检查this link

jquery翻转图像移动到位置外（jquery-hover）

2 个答案: