如何让一个 div 出现在另一个 div 的悬停上（CSS 或 JavaScript）答案

【问题标题】：How to make a div appear on hover of another div (CSS or JavaScript)如何让一个 div 出现在另一个 div 的悬停上（CSS 或 JavaScript）
【发布时间】：2014-02-07 18:43:54
【问题描述】：

我进行了很多搜索，但这些解决方案都不适合我。

这是我的 JSFiddle：http://jsfiddle.net/HS3jh/

当您将鼠标悬停在标签 tab2 上时，我需要我的 ABOUTTAB div 可见。

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

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

【问题讨论】：

你应该查看bootstrap的下拉列表
您的标记中有<center> 标签。现在是 2014 年。别这样！

标签： javascript css html hover

【解决方案1】：

你可以用一些 jQuery 很容易地做到这一点。有点意思

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

传递给 hover() 的第一个函数是 onMouseEnter 处理程序，第二个是 onMouseExit 处理程序。因此，当您悬停 tab2 时，会显示 ABOUTTAB，而当您取消悬停时，它会被隐藏。以display:none 开头以隐藏它。

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

【讨论】：

虽然这可能有效，但 OP 并未明确提及 jQuery 的使用。他可能需要也可能不需要，这就是为什么我给出了一个简单的 JS 解决方案（有点冗长）。

【解决方案2】：

这是一个选项

在 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()">

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

【讨论】：

【解决方案3】：

使用纯 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（并且不要忘记删除 #，这是 id 选择器）。

【讨论】：