javascript - マウス オーバーで 1 行を強調表示する

Question

マウスがその行の上 (その行の任意の単語の上)にあるときに、複数行の段落の単一行の背景色を変更したい- これは JQuery/JS を使用して実現できますか?

もしそうなら、どのように？

編集：明確にするために、マウスがその上にあると、その行を強調表示し たいと思います。
スクリプトは、カーソルが上にある行を動的に分離し、マウスが上にある間に一時的なスタイルを適用する必要があります。

編集 2:
説明用の写真 -

Answer 1

苦戦しましたが、コンテナーのスタイル (フォント、配置などを含む) をまったく必要とせずにこれを行う方法を思いつきました。

これは完璧な解決策ではありませんが、うまくいけばあなたの目的に合うでしょう。

var
    //Keeps the content (individual spans) as they are built.
    $keeper = $("<div>"),
    //Used to measure span width for comparison to container.
    $measurer = $("<div>"),
    //The container of the text content
    $p = $("p"),
    //An individual line of the content
    $line = $("<span>").appendTo($measurer),

//make this "invisible," but allow for measurement against container width
//with no restriction on measurer's own width (fixed)
$measurer.css({'position': 'fixed', 'top': '100%'}).appendTo("body");

//Iterate through each "word" derived from splitting on any space.
$p.text().split(/\s/).forEach(function (elem) {
    //Start forming line text.  Don't forget word spacing
    $line.text($line.text() + elem + ' ');

    //Enough words to make the line width longer than the p width.
    //This indicates the end of "line."
    if ($line.width() > $p.width()) {
        //Remove the last word.
        $line.text(function (_, text) {
            return text.slice(0, text.lastIndexOf(elem));
        });

        //Keep the currently formed line to add back later
        $line.appendTo($keeper);

        //Create a new line for measuring
        $line = $("<span>");
        $line.text(' ' + elem).appendTo($measurer);
    }
});
//Append any leftover words not big enough to form a whole line
$keeper.append($measurer.html());
//Add back content
$p.html($keeper.html());
//cleanup
$keeper.remove();
$measurer.remove();

http://jsfiddle.net/6Cx3h/2/

コンテナの幅がウィンドウに依存する場合は、ウィンドウのサイズ変更でもこれを行うことができます。

( http://jsfiddle.net/6Cx3hで、幅の代わりに高さを使用した私の試みを見ることができます)

Answer 2

各行は単一のタグである必要が<span>あります。必要に応じて使用でき、css(javascript や jQuery よりも) を使用して実行できます。

span:hover{
  background-color: #ccc;
}

Answer 3

It all depends on how your text is formatted originally. From the screen shot you show, it looks to me like the text is being wrapped in an element that is enforcing line wraps. In this case there is no real "new line" in the whole text. It's would change if the size of the element changed... As an example, the text you are reading now is being wrapped within the constrains of the site...

But if I were to
insert my own line
breaks, then the
following method
might be of use.

// extract the text
var paragraph = $("#text").text();
// split the text into lines by searching for linebreaks
var lines = paragraph.split(/\r?\n/);
// clear the original text
$("#text").text('');
$.each(lines,function(index,elem){
  if (elem != ''){
    // for each line, wrap it with a span and bring back the linebreak
    $("#text").append('<span>'+elem+'</span><br/>');      
  }
});

Now all you would have to do is make some css rule to highlight the span elements on a hover event -

span:hover { background:#DDD }

A live example

Answer 4

テキストの各行の後ろに配置されるブロックを作成することにより、フォーマットされていない段落の1行の強調表示をシミュレートできます。このブロックはあなたと同じサイズp line-heightになり、マウスのy位置に応じてtop位置を変更できます。このアプローチは、ネイティブのハイライトと見なすことはできませんが、他の提案に比べていくつかの利点があります。まず、どのテキストにも対応できます。次に、流動的なテキストブロックのサイズを変更した後でも、行数を計算できます。<br/>第三に、余分なマークアップ（ ）やその他のマークアップからテキストをクリーンに保ちますbreaks。

HTML：

<p>Some long non-formatted - fluid text</p>

CSS：

p {
    position:relative;
    text-align:justify;
    font: 14px/18px Arial; /*Line-height is essential to be defined because not all browsers translate the default value in px - e.g. Chrome returns "normal" and FF returns pixels*/
}
p span {  /*The highlighter*/
    background:yellow; /*Highlight color*/
    display:none; /*Hide it until we have a hover*/
    position:absolute;
    left:0;
    z-index:-1; /*Place it behind the text*/
}

jQuery：

//get the line-height
var theLineheight = $('p').css('line-height'); 
//strip it from the 'px'
var Lineheight = parseInt(theLineheight); 
//get the text height
var thePheight = $('p').height(); 
//update the height after resize
window.onresize = function () {
    return thePheight = $('p').height(); 
}
//create the highlight box
$('p').append('<span style="height:' + theLineheight + ';width:100%"></span>'); 
//detect mouse movement in the text container
$('p').mousemove(function (e) {
    //show the highlighter
    $('p span').show();
    //get the mouse position
    mouseTop = e.pageY - this.offsetTop;
    //round it to a line-height scale
    topPos = Math.ceil(mouseTop / Lineheight) * Lineheight - Lineheight;
    //position the highlighter vertical
    $('p span').css('top', topPos + 'px');
    //hide the highlighter when mouse is at the end of the text - including the space that highlighter takes
    if (topPos > (thePheight - Lineheight)) {
        $('p span').hide();
    }
//hide the highlighter when mouse is not over the text
}).mouseout(function (e) {
    $('p span').hide();
});

デモは次のとおりです：http：//jsfiddle.net/gh8gZ/1/

私の提案に私が見ることができる唯一の欠点は、空の行を持つテキストブロックがある場合、それらも強調表示されることです。また、強調表示された領域は行の幅全体を占めます-これは私にはまったく気になりませんがこれは完璧な解決策ではないことを示さなければなりません。