javascript - 如何在将鼠标悬停在元素类或 id 上时调用 JavaScript？

Question

我在一页上有 1,000 个链接。每个链接都有一个标题/注释/工具提示。所有的标题都说同样的事情，所以我可以让 javscript 为我做这件事，而不是在每一行上输入它？

之前的示例:

<div class="links">
<a href="#" title="This is a title">Tooltips</a> 
<a href="#" title="This is a title">Tooltips</a> 
<a href="#" title="This is a title">Tooltips</a> 
<a href="#" title="This is a title">Tooltips</a> 
</div>

我想要的示例:

<div class="links">
<a href="#" >Tooltips</a> 
<a href="#" >Tooltips</a> 
<a href="#" >Tooltips</a> 
<a href="#" >Tooltips</a> 
</div>

并让java脚本在鼠标悬停在“div .links a”上时显示注释

提前致谢。

Answer 1

jsFiddle Demo

var set = document.querySelectorAll(".links a");
var tip = document.createElement("div");
tip.className = "hover";
var msg = document.createElement("div");
tip.appendChild(msg);
msg.innerHTML = "Generic Hover Message";
for( var i = 0, n = set.length; i < n; i++ ){
 set[i].onmouseover = function(){
     this.parentNode.insertBefore(tip,this);
 };
 set[i].onmouseout = function(){
     tip.parentNode.removeChild(tip);
 };
}

为目标元素设置事件

使用 document.querySelectorAll^MDN 的组合 并迭代分配 onmouseover event^MDN 的集合 和 onmousout event^MDN 每个元素。

var set = document.querySelectorAll(".links a");
for( var i = 0, n = set.length; i < n; i++ ){
 set[i].onmouseover = function(){

使用 document.createElement^MDN 创建元素 工具提示

var tip = document.createElement("div");
tip.className = "hover";
var msg = document.createElement("div");
tip.appendChild(msg);
msg.innerHTML = "Generic Hover Message";

创建样式来定位工具提示

.hover{
 position: absolute;
 display:inline-block;
 width:100%;
}
.hover > div{
 top: 1.2em;
 position:absolute;
 z-index: 1;
}

使用 insertBefore^MDN 放置元素

this.parentNode.insertBefore(tip,this);