将鼠标悬停在para上应该在jquery中显示相同的内容

时间:2012-08-20 14:34:06

标签: jquery

每当我悬停“p”时,它应该显示“重复”之类的内容 并单击“复制”以悬停para应显示在“p”下 在这里我尝试一些事情......

<div id="one">
<p>This is para, when i hover i will appear. </p>
<p>This is another, when i hover i will appear. </p>
<h4 id="o"><a href="#one">Duplicate</a></h4>
<div class="tex"></div>
<ul>
</ul>
</div>

和jquery是

var id = '';
 $("p").hover(function() {
id = $(this).text();
$("#o").show();
},
function() {
$("#o").delay(2000).fadeOut("slow");
 });

$("#o").click(function() {
 $(id).appendTo("tex");
  });

这里我做了一些错误。但我不知道。

3 个答案:

答案 0 :(得分:1)

这里有你想要的完整答案。

HTML

 <div id="one">
 <p>This is para, when i hover i will appear.</p>
 <p>This is another, when i hover i will appear.</p>
 <h4 id="o"><a href="#one">Duplicate</a></h4>
 </div>

这里是jquery

(function($) {
$.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: $('<p>').append(this.eq(0).clone()).html();
}
})(jQuery);

var is, id = '';
$("p").live({
    mouseover: function() {
   is = $(this);
    id = $(this).outerHTML();
     $("#o").insertBefore(is).show();
  },
  mouseout: function() {
    $("#o").delay(2500).fadeOut("slow");
  }
});
$("#o").click(function() {
 $(is).after(id);
});

此处演示:jsfiddle

答案 1 :(得分:0)

您正在使用id作为选择器,这是不对的。

var txt = '';
$("p").hover(function () {
    txt = $(this).text();
    $("#o").show();
},

function () {
    $("#o").delay(2000).fadeOut("slow");
});

$("#o").click(function () {
    $('.tex').append(txt);
});

答案 2 :(得分:0)

试试这个

$('.tex').append(id);

而不是

$(id).appendTo("tex");

您正在尝试将文本转换为jquery对象$(id) ..您要做的是使用class = tex

将文本追加到元素中

http://jsfiddle.net/wirey00/9vg8u/5/