1

我经常使用一种旧方法将“-rollover”附加到 img 以节省大量 css 规则，但我遇到了一个无法使其工作的实例。

通常我只是给 img 一个翻转类，然后使用这个 jQuery：

$(".rollover").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("-rollover."));
}, function() {
    $(this).attr("src", $(this).attr("src").split("-rollover.").join("."));
});

但是在这种情况下，img 位于一个元素中，我希望元素的悬停来更改 img src。

这是 HTML 的示例：

<li class="rollover-child grid-item-2">
    <a href="#">
        <img src="img/copy/file.jpg" width="231" height="130" />
        <span class="gl-grid-text">
            <span class="gl-grid-title">Book!</span>
            <span class="gl-grid-sub-text">View upcoming events</span>
            <span class="gl-grid-arrow">&gt;</span>
        </span>
    </a>
</li>

还有一些列表项没有锚点但仍然需要翻转效果，例如

<li class="rollover-child>
    <img src="img/copy/file.jpg" width="231" height="130" />
</li>

我正在尝试的 jQuery 是这样的：

$(".rollover-child").hover(function() {
    $('img', this).attr("src", $(this).attr("src").split(".").join("-rollover."));
}, function() {
    $('img', this).attr("src", $(this).attr("src").split("-rollover.").join("."));
});

但我根本无法让它工作。我已经尝试了 find 和 children 和兄弟姐妹的变体，但我一定做错了什么。

非常感谢任何帮助。

干杯，亚历克斯

4

2 回答 2

1

这样做：

$(".rollover-child").hover(function() {
    $('img', this).attr("src", function(index, currentAttributeValue){
       return currentAttributeValue.split(".").join("-rollover.");
    });
}, function() {
    $('img', this).attr("src", function(index, currentAttributeValue){
       return currentAttributeValue.split("-rollover.").join(".");
    });
});

参见.attr(attributeName, function(index, attr) )

于 2012-09-27T07:12:14.317 回答
0

在这种情况下$(this) 对应于<li class="rollover-child> 并且您正在尝试访问$(this).attr("src") 错误的..您需要在此处定位图像。

尝试这个

 $(".rollover-child").hover(function() {
    $('img', this).attr("src", $(this).find('img').attr("src").split(".").join("-rollover."));
}, function() {
    $('img', this).attr("src", $(this).find('img').attr("src").split("-rollover.").join("."));
});
于 2012-09-27T07:24:24.487 回答