Survolez une div pour afficher une autre div

Cracking pour une journée entière maintenant et ne pouvait toujours pas trouver une solution simple à ce problème.Survolez une div pour afficher une autre div

J'ai une classe

.displaynone{ 
     display:none; 
    }

Je suis en train de

Hover sur # hoversubheader1 et affichage # subheader1 en supprimant .displaynone sur # subheader1.
Ne pas laisser # subheader1 disparaître quand je déplace ma souris de # hoversubheader1 dans # subheader1
Rajouter cette classe à # subheader1 quand ma souris est ni dans # subheader1 ni # hoversubheader1.

ne sont pas encore à accomplir l'étape 2 et 3.

Je sais que vous me voulez imbriquer les éléments, mais j'avoir des raisons de ne pas le faire. En réalité, les deux divs sont séparés par un 'espace', donc naturellement je pourrais avoir besoin d'un setTimeout ou d'autres fonctions liées au timing pour cela mais je ne suis pas sûr si je suis sur la bonne voie.

Serait ma journée si quelqu'un pouvait aider à ce sujet.

Markup

<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; 
}

Source

2016-09-21 iWillGetBetter

Un peu de code serait génial ici. Quel est votre HTML? Montrez le Javascript qui se rapproche le plus de ce que vous voulez ou de ce que vous pensez qui devrait fonctionner. –

vous vous rendez compte que 2 annule 3 n'est-ce pas? – madalinivascu

@madalinivascu Salut merci pour votre réponse! ce que je voulais dire, c'est que nous ne le laissons pas disparaître lorsque nous déplaçons notre souris du titre vers le sous-titre parce que par convention quand vous ne planez plus sur le titre, le sous-titre disparaît – 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>

Source

2016-09-21 12:00:13

Le code I shared est un script Java pur. Vous pouvez en tirer une idée. –

Belle solution! Accepté comme réponse. Cependant, je suis en train de regarder une solution de trois court-circuit à l'aide d'une logique de code précise. Je travaille avec php pour les sous-titres dynamiques, donc il doit être évolutif avec la base de données. – iWillGetBetter

Survolez une div pour afficher une autre div

Répondre

Questions connexes