文本悬停超链接

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 之类的库