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 docs。

但是，如果您想要更多的灵活性，我会考虑使用Tippy

之类的库

文字悬停超级链接

2 个答案: