Question

我需要完全像网页http://www.metrolyrics.com/lose-yourself-lyrics-eminem.html

一样

当您将鼠标悬停在段落上时，会使用共享按钮移动块，并将段落文本放入变量中。

有人可以帮帮我吗？

这是我找到的，但我不明白为什么不起作用：

$('.line').hover(function(){
$('.line').removeClass('hover');
$(this).addClass('hover').next().addClass('hover').next().addClass('hover').next().addClass('hover');
});


$('.line').hover(function(){
$('.line').removeClass('hover');
$("#share-image").appendTo(this);
.appendTo("#destination");$(this).addClass('hover').next().addClass('hover').next().addClass('hover').next().addClass('hover');
});

的CSS：

.line.hover {
background-color: #3333FF;
}

Answer 1

我认为这是你正在寻找的，但不确定。

HTML：

<p id='paragraph'>This is text</p>

<p id='textInsert'>Text will go here</p>

JavaScript的：

$('#paragraph').on('mouseenter', function() {

    var text = $(this).val();

    $('#textInsert').text( text );

});

Answer 2

当你mouseover一组歌词相对于容器和高度得到它的偏移然后将其应用于另一个绝对位于右边的div。

此代码应该让你在那里得到85％。

这是我的JS：

var $share = $('<div class="share">f p t</div>'),
    $lyrics = $('.lyrics');

$lyrics.append($share);

$lyrics.on('mouseover', 'p', function () {

  var $this = $(this),
      height = $this.height(),
      top = $this.position().top;

  $share
    .css({
      top: top,
      height: height,
      backgroundColor: 'red'
    })
    .data(
      'lyrics', 
      $this.text()
    );

});

$share.on('click', function () {
  alert($share.data('lyrics'));
});

这是一个小小的演示：http://jsbin.com/jicekoca/3/edit

如何在鼠标悬停上选择文本，然后将其放入变量中以便在php中进一步使用

2 个答案: