Question

我在我的网站上使用“飞越”效果。与this - 水平效果一样。

该脚本适用于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中工作，而不是另一个？就像我说的所有其他浏览器似乎都很好。

由于

Answer 1

您无法在单个文档上重复id ....请使用class代替see the v4.0.1 HTML specs here和v5 HTML specs here

使用类的示例：

<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选择器中的

.是类的前缀，而不是#的{{1}}

jQuery和IE7 id问题

1 个答案: