1

我在我的网站上使用“飞越”效果。像这样- 水平效应。

该脚本适用于 IE8、9、FF 和 Chrome。在 IE7 中，我在页面上有多个元素。两者都有相同的id。将鼠标悬停在页面上的第一个项目上，它会加载。将鼠标悬停在另一个上，它根本不起作用。对我来说没什么意义。

我的代码如下：

HTML

<div style="margin-bottom:30px;" id="takealook-sub">
            <a href="#">
                <img style="left: -200px;" alt="" src="path/to/image">
            </a>
</div>

jQuery

$(function(){
        $("#takealook-sub a").hover(function(){
            $("img", this).stop().animate({left:"0px"},{queue:false,duration:600});
        }, function() {
            $("img", this).stop().animate({left:"-200px"},{queue:false,duration:600});
        });
    });

有谁知道为什么一个可以在 IE7 中工作，而另一个不能工作的原因？就像我说的，在所有其他浏览器中一切似乎都很好。

谢谢

4

1 回答 1

4

您不能id在单个文档上有重复的 s .... 改用 a class...请参阅此处的 v4.0.1 HTML 规范和此处的v5 HTML 规范

使用类的示例：

<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>
<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>

即你可以拥有尽可能多的......然后你可以这样做：

$(function () {
    $(".takealook-sub a").hover(function () {
        $("img", this).stop().animate({
            left: "0px"
        }, {
            queue: false,
            duration: 600
        });
    }, function () {
        $("img", this).stop().animate({
            left: "-200px"
        }, {
            queue: false,
            duration: 600
        });
    });
});

在 jQuery 选择器.中是类的前缀而不是#for ids

于 2012-04-18T11:28:44.607 回答