別のdivを表示するために1つのdivに移動します

今一日中クラッキングしても、この問題の簡単な解決策は見つかりませんでした。別のdivを表示するために1つのdivに移動します

私は＃のsubheader1に.displaynoneを除去することにより、＃1 hoversubheader1と表示＃のsubheader1にホバー

.displaynone{ 
     display:none; 
    }

を持っています。私は私のマウスはどちらも＃のsubheader1も＃hoversubheader1のときに＃のsubheader1にそのクラスをバック追加＃のsubheader1

に＃hoversubheader1から私のマウスを移動すると
は＃1 subheader1が消えないようにしてください。

私はあなたが巣に要素を私はしたいことを知っているが、私はそうしないように理由があるステップ2と3

を達成するためには至っていません。実際には2つの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スクリプトです。これから手がかりを取ることができます。 –

ニースのソリューション！答えとして受け入れます。しかし、実際には、正確なコードロジックを使用して、短い3つの4つのライナーソリューションを検討しています。私はダイナミックサブヘッダのためにphpで作業しているので、データベースとスケーラブルでなければなりません。 – iWillGetBetter

別のdivを表示するために1つのdivに移動します

答えて

関連する問題