Javascript 如何使数据元素中的文本在特定'；项目'；在页面上

例如：

此页面只有两部分：标题和内容。在内容中有100个链接。（在我的情况下更是如此）。每个链接有4个数据属性。数据名称、数据时间、数据日期和数据压缩。内容中的每个链接都有这4个属性，每个属性都不同。当我将鼠标悬停在具有这些数据属性的链接上时，如何使该链接的数据显示在标题中的div中？因此，我悬停在该数据上的每个新链接都将出现在标题中

我看过“popunders”上的东西，但我不确定那是我需要的

---

提前谢谢

我假设您可以使用JQuery。以下步骤对你有用

第1步：你可以在锚上使用鼠标

$（“#id_锚”）.mouseover（函数（）{
});

第2步：
$（this.data（'data-name'）

这将进入事件下，获取其他值并连接它们

步骤3:
$（'#Output div'）.html（value）//在输出div中显示连接的值

整个代码如下所示

var divStr;
$( "#id_anchor" ).mouseover(function() {
  divStr += $(this).data('data-name'); 
  divStr += $(this).data('data-time'); 
  divStr += $(this).data('data-date'); 
  divStr += $(this).data('data-zip'); 
  // you can also format the data here like the way you want
});
$('#Output-div').html(divStr) 

试试这个

$(document).ready(function(){
    var a ;
    var header = $("#header");
    $(".link").mouseover(function(){
        a = "Name : "+$(this).data('name') + " Date : "+$(this).data('date')+ " Time : "+$(this).data('time')+ " Zip : "+$(this).data('zip');
        $("#header").text(a);
    }).mouseleave(function(){
        $("#header").text("Hello World!");
    });
});

将所有链接保留在一个通用的
类中
，以便轻松选择
触发
mouseover（）
函数以获取这些链接的数据属性
将其连接到
div
或在您的案例中显示到标题
不管怎样，您可能会显示一个JSFIDLE？对不起，我对JS太陌生了。你能用你的html给我创建一个JSFIDLE吗。然后我可以更新js部分。当然可以，给我一点时间，谢谢，我必须做一个快速的例子，因为我的代码太长了。我可以整合它，因为我确信一旦我看到它，这是一个简单的任务。这是小提琴。谢谢更新小提琴。现在请检查是否有方法在鼠标未移动或鼠标离开链接时将标题保持在默认状态？IE：标题中的欢迎信息会一直显示，直到链接被鼠标移过为止。谢谢你的回答，它们都很好。由于rep tho的原因，无法投票给你。但是谢谢@user2106354有attach
.mouseleave（）
@user2106354没关系：）检查我的更新答案。