Ich möchte einen Textbereich mit dem Mauszeiger in einem bestimmten Link erstellen.

Was ich versucht habe, ist in diesem Geigencode enthalten.

Aber ich möchte einen Textbereich dynamisch erstellen, wenn ich mit der Maus über den Link fahre.

Dieser Textbereich wird auf der rechten Seite festgelegt (wenn Sie auf den Link klicken) und deklariert auch einige Felder, die CSS für diesen Textbereich unterstützen, damit Sie den Stil ändern können des Textbereichs.

Kann mir jemand dabei helfen?

Vielen Dank

-1
Viral Shah 9 Okt. 2012 im 10:48

6 Antworten

Beste Antwort

Willst du so etwas? http://jsfiddle.net/nmZb9/18/

* UPDATE: * Ich würde es so machen, wenn es sich um einen Tooltip handelt, den Sie nach http suchen : //jsfiddle.net/nmZb9/24/

0
Anton 9 Okt. 2012 im 07:35

Sie können Ihr Ziel auch auf diese Weise erreichen - http://jsfiddle.net/nmZb9/27/.
Dieser ist ohne aufdringliche js (onmouseover Attribute)

0
Michael Schmidt 9 Okt. 2012 im 08:22

Ich denke, das ist die Antwort, nach der Sie suchen:

Html:

<span>
    <textarea id="text1" style="display:none" onmouseout="showText(1,false)"></textarea>
    <a href="foo.com" id="link1" onmouseover="showText(1,true)">foo.com</a>
</span>
<span>
    <textarea id="text2" style="display:none" onmouseout="showText(2,false)"></textarea>
    <a href="bar.com" id="link2" onmouseover="showText(2,true)">bar.com</a>
</span>

Js:

function showText(i, show) {

    var text, link;

    if (i == 1) {
        text = document.getElementById('text1');
        link = document.getElementById('link1');
    } else {
        text = document.getElementById('text2');
        link = document.getElementById('link2');
    }
    if (show) {
        text.style.display = 'inline';
        link.style.display = 'none';
    }
    else {
        text.style.display = 'none';
        link.style.display = 'inline';
    }

}​  

Hier ist der Link, um es zu versuchen: http://jsfiddle.net/dNuy6/3/

Das verstehe ich aus Ihrer Frage. Ich ersetze den Link durch den Textbereich mit der Maus darüber. Wenn dies nicht das ist, wonach Sie suchen, geben Sie bitte eine genauere Erklärung.

Das Problem bei diesem Ansatz ist, dass der Benutzer niemals auf den Link klicken kann!

0
Mohammad Dehghan 9 Okt. 2012 im 07:35

Hier meine 2 Cent, http://jsfiddle.net/BsTTr/4/

Vollständig Vanille-Javascript (keine Frameworks)

Bearbeiten: CSS-Regel hinzugefügt, um den Textbereich-Container nach rechts zu verschieben

0
9 Okt. 2012 im 07:39

Rufen Sie beim Mouseover des Links einen Ajax auf, der den HTML-Code des Textbereichs abruft, oder erstellen Sie ein verstecktes Element in HTML und zeigen / verbergen Sie die Funktionalität mithilfe von jquery beim Mouseover-Ereignis von jquery

Zum Beispiel ist die Link-ID # link1 und ein div-Element, das die Textbereichs-ID div1 enthält

JQuery ('# link1') .hover (function () {jQuery ('# div1'). show ();}, function () {jQuery ('# div1'). hide ();});

0
Jhanvi 9 Okt. 2012 im 06:57

HTML:

<div id="container" style="height:100px;">
</div>
<a href="foo.com" onmouseover="addTextarea('foo.com is a great site')" onmouseout="$('#container').empty();">Foo.com</a>
<a href="bar.com" onmouseover="addTextarea('bar.com is a terrible site')" onmouseout="$('#container').empty();">Bar.com</a>

JS:

function addTextarea(str) {
    $('#container').html(
    $('<textarea></textarea>')
      .val(str))
}​
0
karaxuna 9 Okt. 2012 im 06:59