悬停在一个 div 上以显示另一个 div答案

【问题标题】：Hover on one div to display another div悬停在一个 div 上以显示另一个 div
【发布时间】：2017-01-29 06:40:06
【问题描述】：

现在破解了一整天，仍然找不到解决这个问题的简单方法。

我有课

  .displaynone{
      display:none;
    }

我正在努力

将鼠标悬停在 #hoversubheader1 上并通过删除 #subheader1 上的 .displaynone 来显示 #subheader1。
当我将鼠标从 #hoversubheader1 移动到 #subheader1 时，不要让 #subheader1 消失
当我的鼠标既不在#subheader1 也不在#hoversubheader1 中时，将该类添加回#subheader1。

尚未完成第 2 步和第 3 步。

我知道你会希望我嵌套元素，但我有理由不这样做。实际上，这两个 div 被一些“空格”隔开，所以自然我可能需要一个 setTimeout 或其他与时间相关的函数，但我也不确定我是否走在正确的轨道上。

如果有人能在这方面提供帮助，我会很高兴的。

标记

<div class="ui basic vertical segment" id="header">
        <div class="ui container">
            <div class="ui text menu">
                <a class="item">
                    Item
                </a>
            </div>
            <div class="ui text menu displaynone" id="subheader">
                    <a class="right item" id="hoversubheader1">
                        subheadertitle1
                    </a>
                    <a class="item" id="hoversubheader2">
                        subheadertitle2
                    </a>
            </div><!--end of subheadermenu-->
            <div class="ui text menu displaynone" id="subheader1">
                    <a class="right item">
                        detail
                    </a>
                    <a class="item">
                        detail
                    </a>
            </div><!--end of subheadermenu-->
            <div class="ui text menu displaynone" id="subheader2">
                    <a class="right item">
                        detail
                    </a>
                    <a class="item">
                        detail
                    </a>
            </div><!--end of subheadermenu-->
        </div><!--end of container-->
    </div><!--end of segment-->

    (function($) {
    "use strict"; // Start of use strict
    //header hover brings out subheader bar
    $("#header").hover(
      function () {
        $("#subheader").removeClass("displaynone");
      },
      function () {
        $("#subheader").addClass("displaynone");
      }
    );
    //hovering on each subheadertitle should display each subheader1, subheader2 etc
    $('#hoversubheader1,#subheader1').mouseenter(function(){

        $('#subheader1').removeClass("displaynone");
    }).mouseleave(function(){

        $("#subheader1").addClass("displaynone");

    });

    $('#hoversubheader2,#subheader2').mouseenter(function(){

        $('#subheader2').removeClass("displaynone");
    }).mouseleave(function(){

        $("#subheader2").addClass("displaynone");

    });
    }(jQuery)); // End of use strict

CSS

#header{
    background-color: white;
    opacity: 0.97;
    position: fixed;
    width: 100%;
    z-index: 99;
    padding:0;
    padding-bottom:0;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

#header > .ui.container > .ui.text.menu{
    margin-bottom:0;
}


#subheader,
#subheader1,
#subheader2{
  padding:0;
  margin:0;
}

#subheader1,
#subheader2{
  height:200px;
}

#subheader > .ui.text.menu,
#subheader1 > .ui.text.menu,
#subheader2 > .ui.text.menu{
  margin:0;
}
#subheader.displaynone,
#subheader1.displaynone,
#subheader2.displaynone{
  display:none;
}

【问题讨论】：

这里有一些代码会很棒。你的 HTML 是什么？显示最接近您想要的或您认为应该工作的 Javascript。
你意识到 2 取消 3 不是吗？
@madalinivascu 嗨，感谢您的回答！我的意思是，当我们将鼠标从标题移动到子标题时，我们不允许它消失，因为按照惯例，当您不再将鼠标悬停在标题上时，子标题会消失
在 3. 当你鼠标移出时你想隐藏子标题
@madalinivascu 是的，例如当我将鼠标移出#subheader1 和#hoversubheader1 时，我希望#subheader1 内容消失，所以当我将鼠标移到#hoversubheader2 时，我可以显示#subheader2跨度>

标签： jquery hover settimeout mouseleave mouseout

【解决方案1】：

<!DOCTYPE html>
<html>

<head>
  <style>
    .general {
      height: 100px;
      width: 100px;
      border: solid 1px black;
    }
    .divClass {
      display: inline;
    }
    .divClassB {
      display: none;
    }
  </style>
  <script src="script.js"></script>
  <script>
    var flag = false;

    function MouseOver(obj) {

      if (obj.id == "DivA" || obj.id == "DivB") {
        flag = true;
        document.getElementById('DivB').style.display = 'inline';
      }
      showhide(flag);
    }

    function MouseOut(obj) {

      if (obj.id == "DivA" || obj.id == "DivB")
        flag = false;
      setTimeout(function() {
        showhide(flag);
      }, 3000);

    }

    function showhide(flag) {
      if (flag) {

        document.getElementById('DivB').style.display = 'inline';
      } else
        document.getElementById('DivB').style.display = 'none'

    }
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="general divClass" id="DivA" onmouseout="MouseOut(this)" onmouseover="MouseOver(this)">
    Div A
  </div>
  <div>
    This is for space
  </div>
  <div id="DivB" class="general divClassB" onmouseout="MouseOut(this)" onmouseover="MouseOver(this)">
    Div B
  </div>
</body>

</html>

【讨论】：

我分享的代码是纯java脚本。你可以从中得到线索。
不错的解决方案！接受为答案。然而，我实际上正在寻找一个使用精确代码逻辑的短三四线解决方案。我正在使用 php 处理动态子标题，因此它必须可以通过数据库进行扩展。