Question

我做了很多搜索，但这些解决方案都没有对我有用。

当您将鼠标悬停在标签ABOUTTAB上时，我需要显示tab2 div。

#ABOUTTAB {
  position: absolute;
  width: 218px;
  height: 35px;
  margin-top: -32px;
  margin-left: 231px;
  visibility: hidden;
}

随意使用CSS或Javascript，感谢任何帮助，如果需要，甚至可以使用html。

Answer 1

你可以使用一些jQuery轻松地完成它。

的影响

$('#tab2').hover(
    function(){
        $('#ABOUTTAB').show();
    },
    function(){
        $('#ABOUTTAB').hide();
    });

传递给hover（）的第一个函数是onMouseEnter处理程序，第二个函数是onMouseExit处理程序。因此，当您悬停tab2时，会显示ABOUTTAB，当您将其移除时，它将被隐藏。将其作为display:none启动以隐藏它。

对jQuery做一些研究。这种DOM操作非常简单直观。

Answer 2

使用纯JavaScript，可以通过以下类似的方式实现：

document.querySelector("#tab2").addEventListener("mouseover", function() {
  document.querySelector("#ABOUTTAB").style.visibility = "visible";
});

document.querySelector("#tab2").addEventListener("mouseout", function() {
  document.querySelector("#ABOUTTAB").style.visibility = "hidden";
});

这样，您不需要jQuery but if you need it to work with IE < 8，用户getElementById而不是querySelector（并且不要忘记删除#，即{ {1}}选择器）。

Answer 3

这是一个选项

在JS上。

<script type="text/javascript">
function wait(){
    var tab2 =  document.getElementById("tab2");
    tab2.addEventListener('mouseover',change,false);

}


function change(){
    document.getElementById('ABOUTTAB').style.visibility =  "visible";
}


</script>

在此示例中，

不会更改为隐藏。

并在身上

<body onload="wait()">

当浏览器加载网页收取功能时。

如何在另一个div（CSS或JavaScript）的悬停时出现div

3 个答案: