2

次のようなリンクに包まれた画像がたくさんあります。

<a class="tipsFeatured" href="#" rel="products/p0.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/pott-5pc-setting-pott.jpg" alt="Silver Cutlery" width="170" height="170" /></a>
            <a class="tipsFeatured" href="#" rel="products/p1.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/Design-House-Stockholm-Cobalt_Pitcher.jpg" alt="Design House Stockholm Cobalt Pitcher" width="170" height="170" /></a>

私は id #descText の div を持っています。この各リンクの上にマウスを置いたときに、現在の要素のすぐ隣に div が毎回異なるテキストで表示されるようにしたいと思います。「毎回異なるテキスト」の部分は方法を知っていますが、現在のホバーされた要素の隣にdivを表示させることができませんでした：

$('.tipsFeatured').bind('mouseover',function(){
        var $txt = $('#descText');
        $(this).next().append($txt.css('display','block'));
    });
4

6 に答える 6

1

2 つの関数.mouseenter()を使用するand .mouseleave()orの組み合わせを使用する必要があります。そうしないと、マウスがアンカー タグ上を移動するたびに、ed またはed になっているものが追加されます。私は明示的な mouseenter/leave を好みますが、二重機能ホバーは mouseenter/leave のエイリアスであるため、個人的な好みです。.hover() .append()after()

次の例では、 が#descText表示され、 に追加される<a>ため、 はアンカー内にあり、したがってハイパーリンクされます。<span id="descText"/>ハイパーリンクを使用したくない場合は、.after()代わりに.append().

HTML

<a class="tipsFeatured" href="#" rel="products/p0.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/pott-5pc-setting-pott.jpg" alt="Silver Cutlery" width="170" height="170" /></a>
<a class="tipsFeatured" href="#" rel="products/p1.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/Design-House-Stockholm-Cobalt_Pitcher.jpg" alt="Design House Stockholm Cobalt Pitcher" width="170" height="170" /></a>

<span id="descText">the text</span>

CSS

#descText { display:none; }

JavaScript

$('.tipsFeatured').mouseenter(function() {
    $(this).append($('#descText').show());
}).mouseleave(function() {
    $('#descText').hide();
});

デモ

ただし、複数の画像の説明があり、追加する前に内部のテキストを何らかの形で変更していると思います。これは、1 つの一意の要素#descTextでしか機能しないためです。#descText

于 2011-08-01T18:38:03.737 に答える
0

これはあなたのためにそれをするはずです：

$('.tipsFeatured').hover(
    function(){
        var element = $(this).children(),
            text    = element.attr('data');

    $(this).append('<div id="descText">'+text+'</div>');

    },
    function(){

    $('#descText').remove();

    }
);

デモ： http： //jsfiddle.net/hx8Tv/2/

画像を置き換え<span>ます。

少し余分です。

于 2011-08-01T17:45:55.407 に答える
0

これを行う 1 つの方法は<div id="foo_1"></div>、説明をホバーオーバーさせたい各要素の横に空白を作成し、各 ID が一意であることを確認することです。次に、javascript で、次のように言って$('foo_'+id)、id 変数で識別させることができます。

于 2011-08-01T17:17:03.287 に答える
0

を使用すると、現在の要素の後に説明 div を挿入する代わりに、DOM 内.next()の次の要素を選択し、それに説明 div を追加します。aa

これを試して：

$('.tipsFeatured').bind('mouseover',function(){
    var $txt = $('#descText');
    $(this).after($txt.css('display','block'));
});

jQueryのafter()機能を利用しています。

于 2011-08-01T17:21:02.607 に答える
-1

Shouldn't that be:

$('.tipsFeatured').bind('mouseover',function(){
    var $txt = $('#descText');
    $txt.css('display','block');
    $(this).after($txt);
});

EDIT:

Updated my answer, which is what I was coming back to the page to do anyway. A good lesson - better to test first, then post, than to post and correct.

于 2011-08-01T17:14:42.497 に答える
-2

これを試して

$('.tipsFeatured').hover(function() {
    var contentInsideElement = /* 'Whatever'; */
    var descText =  $("#descText");
      if(descText.length)
        descText.html(contentInsideElement);
      else
         descText = $('<div id="descText">' + contentInsideElement +   '</div>').appendTo(document.body);

    $(this).after(descText);
   }, function() { // Remove new element on mouseout
     $('#descText').hide();
});
于 2011-08-01T17:27:01.867 に答える