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>

并在鼠标悬停“div .links a”

时让java脚本显示注释

提前致谢。

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);

Answer 2

喜欢这个吗？

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

Answer 3

以下是使用Travis建议的解决方案与querySelector和onmouseover。

的示例

<html>
   <head>
      <title>Link over</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
         .links{
         }
      </style>
      <script>
         // I show a tooltip
         function showTip() {
            console.log("I'm a tooltip");
         }

         // I set up the listeners
         window.onload = function() {
            var links = document.querySelector("div.links");
            for (var i = 0; i < links.children.length; i++) {
               links.children[i].onmouseover = showTip;
            }
         };
      </script>
   </head>
   <body>
      <div class="links">
         <a href="#">Tooltips</a> 
         <a href="#">Tooltips</a> 
         <a href="#">Tooltips</a> 
         <a href="#">Tooltips</a> 
      </div>
   </body>
</html>

如何在悬停在元素类或id上时调用JavaScript？

3 个答案: