Comment utiliser les CSS pour positionner div popup lors de l'utilisation :hover...?

Je suis en train de créer un menu déroulant dans le CSS. Dans ce cas, c'est une petite div contenant le texte de l'étiquetage de l'image que vous êtes en vol stationnaire. Cependant, je suis définitivement de faire le mal. Soit je suis le positionnement de l' :hover div dans le CSS de manière incorrecte (j'ai essayé différentes positions (fixe et absolu, float, clair, etc.), mais il continue de s'afficher à l'intérieur de la div principale. J'ai pu mal avec mon code HTML, comme je le suis, en les plaçant dans la div principale que vous passez le curseur de la fenêtre contextuelle apparaît. Mais je pense qu'il doit être là pour montrer lorsque vous placez le pointeur de la div principale. Toute aide est appréciée. Le Code ci-dessous:

HTML:

<div class="topIcons topIconsHover topLabelHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>

CSS:

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover:hover {
    background-color:#555555;       
    width:80px;
    height:24px;
    position:fixed;
        top:40px;
}

Je suis très bien avec l'aide de JavaScript (JQuery) si c'est nécessaire, mais il semble comme quelque chose d'assez simple pour CSS. Aussi, est-il préférable d'utiliser des CSS sur JavaScript (Jquery), si possible, peut-être parce que c'est plus rapide? J'ai peut être confondu avec il y, mais serait intéressé pour de la meilleure pratique.

modifier* le problème persiste donc pensé que je voudrais vous expliquer plus en détails ce que j'essaie de faire de ma mise en page et peut-être que ça vous aidera. J'ai une série d'icônes dans une barre de navigation, tous les flottait droit. Sur le curseur, j'aimerais que l'arrière-plan de changement (que j'ai géré en CSS avec la "topIconsHover" de la classe) et pour un "label" div apparaissent en dessous de la relative planait icône de la div dans la barre de navigation lors de son survol.

OriginalL'auteur jstacks | 2011-12-04

  1. 2

    Pense que vous voulez quelque chose comme ceci:

    .topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display:none;
}

.topIconsHover:hover .topLabelHover {
    display:block;
    position:absolute;
    background-color:#555555;       
    width:80px;
    height:24px;
    top:40px;
}

    http://jsfiddle.net/kHPZK/

    Le "display:none" semble simplement se débarrasser de la div principale? Lorsque je le supprime, il semble pour créer une div à droite de la div principale, en poussant la div principale à gauche. J'ai finalement veux juste l'étiquette div à se présenter ci-dessous (dans un rapport de position de la div principale) lors du survol.
    Mon mauvais. Viens de faire un edit. Aussi: vous devriez probablement retirer que topLabelHover classe à partir de la div parent, sinon cela ne fonctionnera pas.
    Je ne peux toujours pas le faire fonctionner... quel serait le code html? Aussi, juste pour comprendre le "display:none" est-ce créés, de sorte que l'utilisation de cette classe à tout moment autre que lors de son survol, il n'est jamais affiché? Je suppose que c'est pourquoi il supprime tout parce que mon div parent qui a la classe. Cependant, comment pourrais-je ensuite à structurer le code html afin de permettre au-dessus de cette div pour obtenir l'effet de base, et l'étiquette de la div?
    Je ne suis pas sûr que je comprends ce que tu veux. C'est un moyen rapide jsFiddle j'ai mis en place: jsfiddle.net/kHPZK. Espérons que cela aide.
    Je suppose que je n'étais pas clair dans mon poste principal, donc je m'en excuse. Je veux l'étiquette sous la planait div et non pas à l'intérieur. Par exemple, le lien que vous avez fourni, que la barre de navigation, lorsque vous placez les éléments dans la barre de navigation, vous obtenez un petit popup étiquetage de chaque élément. C'est ce que je cherche à faire, placez une étiquette div (quand j'ai placez le pointeur de la div principale) en vertu de la div principale.

    OriginalL'auteur Kevin Ennis

  2. 1

    Regardez ici:

    DÉMO

    Code utilisé:

    HTML:

    <div class="imagebox">
  <a href="image.html"><img src="http://dummyimage.com/300x120/444/cf5" /></a> 
  <div class="label">transparent Image label</div>  
</div>

    CSS:

      .imagebox{
    position:relative;
    margin:0 auto;
    width:300px;
    background:#eee;
  }
  .label{
    position:absolute;
    display:none;
    top:0px;
    padding:18px;
    background:#fff;
  }

    jQuery:

    $('.imagebox').bind('mouseenter mouseleave', function(e){
  var label = $(this).children('.label');
  m = (e.type === 'mouseenter') ?
  label.stop(1).fadeTo(300,0.9) :
  label.stop(1).fadeTo(300,0) ;
});

    OriginalL'auteur Roko C. Buljan

  3. 1

    Vous ne pouvez utiliser le :hover classe dans le CSS lorsque vous souhaitez modifier le css de l'élément le :hover règle s'applique. Il est venu avec une intéressante solution de contournement dans votre code: à l'aide de .topLabelHover:hover de manipuler le CSS de plusieurs éléments lorsque l'un quelconque d'entre eux ont été survolé. Cela fonctionne, sauf que vous devez prendre en compte le fait que cela va changer le css de tous les éléments avec la classe et pas seulement celui qui planait au-dessus. Vous pouvez faire cela, assurez-vous que le CSS de la popup est le seul que les modifications apportées par la définition de la CSS de l'élément déclencheur pour exactement la même chose:

    .topIcons {
    position: absolute;
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display: none;
}

.topLabelHover:hover, .topIconsHover {
    display: block;
    background-color:#555555;       
    width:80px;
    height:24px;
    position:absolute; //makes the div appear 40px from the top of parent
    top:40px;
}

    Cependant, à mon humble avis c'est très difficile à lire. Votre code sera beaucoup plus clair, plus court et plus simple si vous venez d'utiliser jQuery:

    HTML:

    <div class="topIcons topIconsHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>

    Javascript:

    $(".topIconsHover").hover( function() {
    $(".topLabelHover").addClass("hovered");
});

    Css: 

    .topIcons {
    position: absolute;
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display: none;
}

.hovered {
    display: block;
    background-color:#555555;    //this,   
    width:80px;                  //this,
    height:24px;                 //and this should be factored out into a separate class!
    position: static;            //revert to normal positioning.
}

    Les performances de la version CSS serait infiniment mieux, mais depuis la version Jquery encore faut beaucoup moins de 100ms pour afficher le menu, il se sent juste comme instantanée. 😀

    EDIT: Si vous voulez faire de la pop-up apparaissent sous la div, il suffit de mettre le <div> de la pop-up directement après le déclenchement de la div au lieu de l'intérieur, et changer le .hovered css:

    .hovered {
    background-color:#555555;       
    width:80px;
    height:24px;
}

    Si vous voulez faire une info-bulle-comme l'effet, juste google "jquery tooltip" et choisissez n'importe quelle extension répond le mieux à vos exigences. 😀

    Comment aurais-je obtenir la div pour apparaître en dehors de la div parent (en dessous)? Parce que je n'arrive toujours pas à obtenir en dehors de la div parent (peut-être il ne devrait pas être imbriqué dans le code html, alors?). Je cherche à faire quelque chose de plus semblable à un supposez un menu déroulant (moins la liste, c'est juste une étiquette), je suppose. Je suis très bien avec l'aide de Jquery, il semble beaucoup plus simple que de travailler à travers CSS.
    J'ai édité la réponse légèrement, n'a que peu d'aide?
    Il ne l'aide que je vois ce que le jQuery est en train de faire. Par exemple, il est de ciblage "topIconsHover" alors que sur le curseur de cette classe, il va ouvrir la popup, indépendamment de l'endroit où la div dans le code HTML... donc je n'ai pas besoin de l'avoir niché à l'intérieur de la div. Cependant, j'ai encore des difficultés à voir le planait div. C'est probablement parce que je suis un positionnement mal et c'est hors de l'écran ou quelque chose. Pouvez-vous aider?
    Info-bulle est EXACTEMENT ce que je cherchais. Je n'étais pas vraiment sûr de ce qu'il était lorsque vous l'a dit, juste googlé un peu cependant. Merci!!!!

    OriginalL'auteur Gordon Gustafson