我在一页上有 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”上时显示注释
提前致谢。
最佳答案
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.querySelectorAllMDN 的组合 并迭代分配 onmouseover eventMDN 的集合 和 onmousout eventMDN 每个元素。
var set = document.querySelectorAll(".links a");
for( var i = 0, n = set.length; i < n; i++ ){
set[i].onmouseover = function(){
使用 document.createElementMDN 创建元素 工具提示
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;
}
使用 insertBeforeMDN 放置元素
this.parentNode.insertBefore(tip,this);
关于javascript - 如何在将鼠标悬停在元素类或 id 上时调用 JavaScript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20804451/