文本懸停超鏈接

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 之類的庫