-1

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

我尝试过的就是这个小提琴代码。

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

该文本区域将设置在右侧（单击链接时），并为该文本区域声明一些支持 CSS 的字段，以便能够修改文本区域的样式。

谁可以帮我这个事？

谢谢

4

6 回答 6

0

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

例如链接 id 是 #link1 和一个 div 元素，其中包含 textare id div1

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

于 2012-10-09T06:51:06.303 回答
0

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))
}​
于 2012-10-09T06:52:45.263 回答
0

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

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

于 2012-10-09T07:04:28.427 回答
0

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

完全香草 javascript（无框架）

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

于 2012-10-09T07:09:02.150 回答
0

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

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/

这是我从你的问题中了解到的。我用鼠标悬停的文本区域替换链接。如果这不是您要查找的内容，请给出更准确的解释。

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

于 2012-10-09T07:24:56.690 回答
0

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

于 2012-10-09T08:20:02.747 回答