將鼠標懸停在一個div上以顯示另一個div

現在破裂一整天，仍然無法找到解決此問題的簡單方法。將鼠標懸停在一個div上以顯示另一個div

我有一個類上＃hoversubheader1和顯示＃subheader1

.displaynone{ 
     display:none; 
    }

我想

哈弗通過＃subheader1消除.displaynone。
不允許＃subheader1消失當我移動我的鼠標從＃hoversubheader1到＃subheader1
該類添加回＃subheader1當我的鼠標是既不＃subheader1也不＃hoversubheader1。

尚未完成步驟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; 
}

來源

2016-09-21 iWillGetBetter

一些代碼在這裏會很棒。什麼是您的HTML？顯示最接近你想要的或者你認爲應該工作的Javascript。 –

你意識到2取消3你不是嗎？ – madalinivascu

@madalinivascu嗨感謝您的回答！我的意思是，當我們將鼠標從標題移動到子標題時，我們不允許它消失，因爲按照慣例，當你不再在標題上徘徊時，子標題消失 – iWillGetBetter

<!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>

來源

2016-09-21 12:00:13

代碼I共享是純java腳本。你可以從中得到線索。 –

不錯的解決方案！接受爲答案。不過，我實際上正在使用精確的代碼邏輯來查看短三四線程解決方案。我正在使用PHP來處理動態子標題，所以它必須可以通過數據庫進行擴展。 – iWillGetBetter

將鼠標懸停在一個div上以顯示另一個div

回答

相關問題