1

多くのcssルールを節約するためにimgに「-rollover」を追加するためによく使用した古い方法がありますが、それを機能させることができないインスタンスに遭遇しました。

通常、私は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は要素内にあり、要素にカーソルを合わせるとimgsrcが変更されます。

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と子供と兄弟でバリエーションを試しましたが、何か間違ったことをしているに違いありません。

どんな助けでも大歓迎です。

乾杯、アレックス

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 に答える