0

私はいくつかのボタンのロールオーバーを作成し、「優雅な劣化」のために、そしてすべての画像のロールオーバーなどのコードを書かないために、より効率的なコードを書こうとしています。そうは言っても、私がやりたいことは、数行のコードで、ロールオーバーが画面に表示されるものを少し賢くすることです。

私が達成しようとしているものの1つは、ロールオーバー時に、画像divの中央に表示されるテキストが（css絶対位置を介して）画像のaltプロパティ/要素にあるテキストと同じであることです。

これは、サムネイル画像を含む reg div です。

 <div class="imgW"><img src="img src here"/></div>

ロールオーバーのために、jquery経由で追加します：

$('.imgW').prepend('<div class="portSecRollOver">lopan</div>');

したがって、ページのレンダリングでは、次のように出力されます。

<div class="imgW">
  <div class="portSecRollOver">lopan</div>
  <img src="img src here"/>
</div>

ページの読み込み時に、portSecRollOver は css によって非表示になります。(display:none);

ロールオーバーでは、portSecRollOver が jquery 経由で表示されます。

$('.imgW').mouseover(function(){

        $(this).children('.portSecRollOver').css("display","block");
    });

等...

上記の同じロールオーバー機能ブロックで、私がやりたかったことは、ロールオーバー時に、portSecRollOver div 内に表示されるテキストがその divs 画像 alt タグの値であることです。

どうすればこれを達成できますか?

私は多くのアプローチを試みましたが、それらはすべて何もないものになりました。それをテストするために console.log を実行すると、常に「未定義」が表示され、正しいdomオブジェクトをターゲットにしていないと想定されます。

何か案は？私は多くの方法を試しましたが、これは私が試したことについてのアイデアを提供するためのものです...

$(this).children('.portSecRollOver').html($(this).children('a img').attr('alt'));

ありがとうございます。

4

4 に答える 4

1

これを試してください: 新しい: http://jsfiddle.net/vSFTU/1/古い: http://jsfiddle.net/sKQpd/

altsrc を以下に表示する必要があることに気付きましたportSecRollOver: http://jsfiddle.net/vSFTU/1/

それがあなたのニーズに合うことを願っています:)

コード

$('.imgW').on('mouseover', function() {
    $(this).children('.portSecRollOver').html($(this).find('img').prop('alt'));
    $(this).children('.portSecRollOver').show();

});

$('.imgW').on('mouseout', function() {

    $(this).children('.portSecRollOver').hide();

});
​
于 2012-09-10T23:36:18.327 に答える
1

正しい方向に進んでいるように見えますが、João が指摘したよう<a>に、コードにタグがありませんでした。必要なものは次のとおりです。

$('.imgW').mouseover(function() {
    var portSecRollOver = $(this).children('.portSecRollOver');
    var img = $(this).children('img');
    portSecRollOver.html( img.attr('alt') );
    portSecRollOver.show();
});

JsFiddle: http://jsfiddle.net/bM25f/1/

于 2012-09-10T23:48:10.603 に答える
1

このようにコーディングすることで非常に簡単に実現できます。また、もっと興味深いものが必要な場合は、このようにすることもできます。

于 2012-09-10T23:56:24.930 に答える
1

アンカー.children('img')の後に. .children('a img')_imgaimg

于 2012-09-10T23:34:07.730 に答える