文本悬停超链接

Question

我想在悬停特定 div 时显示文本。 当我悬停时，我会在悬停时看到文本，但它会闪烁。 现在我有那个出现在两个 div（DIV 2 和 DIV 3）上的文本。 当我从 div 2 切换到 div 3 时，我收到了“点击我！”的文字。 但是，如果我将光标停留在“点击我！”这个文字上，它就会开始闪烁。

我的 onMouseOver 和 onMouseOut 功能是

function mouseOverFunc2()
{
    {
        var newDiv = document.createElement("span");
        newDiv.setAttribute("id","id_span");
        newDiv.innerText = " -- click me!";
        div2.appendChild(newDiv);
        console.log(div2);
    }
}

function mouseOverFunc3()
{
    {
        var newDiv = document.createElement("span");
        newDiv.setAttribute("id","id_span");
        newDiv.innerText = " -- click me!";
        div3.appendChild(newDiv);
        console.log(div1);
    }
}

 var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div2.onmouseover = mouseOverFunc2; div2.onmouseout = mouseOutFunc2; div3.onmouseover = mouseOverFunc3; div3.onmouseout = mouseOutFunc3; function mouseOverFunc2() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id","id_span"); newDiv.innerText = " -- click me!"; div2.appendChild(newDiv); console.log(div2); } } function mouseOverFunc3() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id","id_span"); newDiv.innerText = " -- click me!"; div3.appendChild(newDiv); console.log(div1); } } function mouseOutFunc2() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } } function mouseOutFunc3() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } }

 <div id="divv" title="asda"></div> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> <div id="div4">DIV 4</div> <div id="div5">DIV 5</div>

Answer 1

使用mouseenter和mouseleave代替mouseover和mouseout 。 区别？

“虽然类似于鼠标悬停，但它的不同之处在于它不会冒泡，并且当指针从其后代的物理空间之一移动到其自己的物理空间时，它不会发送给任何后代。”

 var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div2.onmouseenter = mouseOverFunc2; div2.onmouseleave = mouseOutFunc2; div3.onmouseenter = mouseOverFunc3; div3.onmouseleave = mouseOutFunc3; function mouseOverFunc2() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id", "id_span"); newDiv.innerText = " -- click me!"; div2.appendChild(newDiv); console.log(div2); } } function mouseOverFunc3() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id", "id_span"); newDiv.innerText = " -- click me!"; div3.appendChild(newDiv); console.log(div1); } } function mouseOutFunc2() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } } function mouseOutFunc3() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } }

 <div id="divv" title="asda"></div> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> <div id="div4">DIV 4</div> <div id="div5">DIV 5</div>

Answer 2

听起来title属性是最好的选择，尤其是在可访问性和跨浏览器功能方面——这里是MDN 文档。

但是，如果您想要更灵活的东西，我会考虑使用诸如Tippy 之类的库