Question

有一种旧的方法，我已经用了很多东西将一个“-rollover”附加到img来为我节省了很多css规则，但是我遇到了一个我无法让它工作的实例。 / p>

通常我只是给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("."));
});

但我根本无法工作。我尝试过与发现，孩子和兄弟姐妹的变化，但我一定是做错了。

非常感谢任何帮助。

干杯，亚历

Answer 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) )}

Answer 2

在这种情况下， $（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("."));
});

jquery让这个孩子改变img src

2 个答案: