Question

我想在鼠标悬停时在给定链接中创建一个文本区域。

我已尝试过这个 fiddle code.

但我想在链接上鼠标悬停时动态创建文本区域。

此文本区域将设置在右侧（点击链接时），并声明一些字段支持该文本区域的CSS 所以，可以修改文本区域的样式。

有人可以帮我吗？

由于

Answer 1

在鼠标悬停链接时调用一个ajax，它获取textarea的html或在html中创建一个隐藏的元素，并在jquery的mouseover事件上使用jquery显示/隐藏功能

例如，链接ID是＃link1和一个div元素，它包含textare id div1

jQuery（'＃link1'）。hover（function（）{ jQuery的（ '＃DIV1'）显示（）; ，function（）{ 。jQuery的（ '＃DIV1'）隐藏（）; }）;

Answer 2

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))
}

Answer 3

你想要这样的东西吗？ http://jsfiddle.net/nmZb9/18/

* 更新： *如果是您要查找的工具提示，我会这样做http://jsfiddle.net/nmZb9/24/

Answer 4

这里是我的2美分，http://jsfiddle.net/BsTTr/4/

完全是香草javascript（没有框架）

编辑：添加了css规则以将textarea容器浮动到右侧

Answer 5

我认为这是您正在寻找的答案：

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';
    }

}

以下是试用它的链接： http://jsfiddle.net/dNuy6/3/

这是我对你的理解。我用鼠标悬停的文本区域替换链接。如果这不是您想要的，请提供更准确的解释。

这种方法的问题是用户永远不能点击链接！

Answer 6

您也可以通过这种方式实现目标 - http://jsfiddle.net/nmZb9/27/。
这个没有突兀的js（onmouseover属性）

在链接的悬停上创建文本区域

6 个答案: