我想在鼠标悬停在给定链接中创建一个文本区域。
我试过的就在这个 fiddle code. 中
但我想在鼠标悬停在链接上时动态创建文本区域。
此文本区域将设置在右侧（点击链接时），并声明一些支持该文本区域的CSS的字段，因此，可以修改文本区域的样式。
谁能帮我解决这个问题？
谢谢
【问题讨论】：
标签： javascript jquery hover jquery-hover
你想要这样的东西吗？ http://jsfiddle.net/nmZb9/18/
*更新：*如果它是您正在寻找的工具提示http://jsfiddle.net/nmZb9/24/
，我会这样做【讨论】：
在链接的鼠标悬停时调用一个 ajax，它获取文本区域的 html 或在 html 中创建一个隐藏的元素，并在 jquery 的鼠标悬停事件上使用 jquery 显示/隐藏功能
例如链接 id 是 #link1 和一个 div 元素，其中包含 textare id div1
jQuery('#link1').hover(function() { jQuery('#div1').show(); }， 功能（） { jQuery('#div1').hide(); });
【讨论】：
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))
}
【讨论】：
我认为这就是您正在寻找的答案：
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/
这是我从你的问题中了解到的。我用鼠标悬停的文本区域替换链接。如果这不是您要查找的内容，请给出更准确的解释。
这种方法的问题是用户永远无法点击链接！
【讨论】：
【讨论】：
您也可以通过这种方式实现您的目标 - http://jsfiddle.net/nmZb9/27/。
这个没有突兀的js（onmouseover属性）
【讨论】：