css :hover pseudo-classe ne fonctionne pas

J'ai un CSS :hover pseudo-classe qui n'est pas de produire des résultats.

J'ai été déconner avec quelques-galerie d'image de code, et j'ai réussi à obtenir ce bout de code ne fonctionne pas. Je ne peux pas comprendre pourquoi. Certains de la plus étrange des règles CSS concernant la taille sont ici parce que ces divs normalement contenir des images. J'ai enlevé les images de la simplicité, mais à gauche les règles.

Autres :hover éléments sur la même page sont de travail.

Je ne suis pas sûr de ce que d'autre à dire sur le problème, car c'est tellement de base. Je suis probablement manquant quelque chose de vraiment évident.

JSFiddle ici -
http://jsfiddle.net/GbxCM/

Je devine que vous essayez de faire une galerie, et sur le vol stationnaire utiliser CSS pour faire de la div contenant une image en plein écran. J'utilise un code JavaScript galerie à le faire...
J'ai essayé d'obtenir un moyen de le faire avec juste CSS.
si vous souhaitez avoir une next et previous ainsi, vous vous retrouverez à l'aide de JavaScript, de toute façon. Et pourquoi réinventer la roue si il y a des solutions existantes qui ont été testé sur tous les principaux navigateurs. Un que beaucoup de gens utilisent est lokeshdhakar.com/projects/lightbox2
J'apprécie qu'il y a diverses visualisation et bibliothèques Javascript sera presque certainement venir en jeu pour un "fonctionnel" version. Ma question a été réalisé à l'étrange CSS comportement dans ce qui semblait être du code fonctionnel.

OriginalL'auteur iabw | 2012-09-11

  1. 13

    Dans certains cas (surtout avec absolute de positionnement), vous ne pouvez pas appliquer un :hover pseudo-classe à quelque chose avec display: inline-block;. (Si vous avez Chrome, utilisez inspecter l'élément et ajouter le :hover trait vous-même--avis, il fonctionne parfaitement! Le navigateur n'a tout simplement pas inscrire les :hover lui-même.)

    Donc, je suis allé de l'avant et remplacées par des float: left;, a ajouté une marge (pour simuler la inline-block look), et changé le br à un clear. Le résultat est dans cette jsFiddle.

    J'avais initialement fait leur inline-blocks pour qu'ils me redimensionne automatiquement les images contenues, mais que, pour l'une des autres styles de galerie, j'ai été déconner avec qui - vous avez raison - n'étaient pas en position absolue. Je pense que le flotteur va travailler ici, et je me sens un peu stupide pour ne pas penser de moi-même. Je vais accepter après que j'ai confirmé et testé.
    Eric, savez-vous la raison de cet écart avec :hover, absolue et inline-block? Est-ce un standard et pourquoi? Je ne trouve aucune info sur ce "bug".
    Je ne trouve pas de rapports officiels, soit. Je suppose que je suis à la recherche de quelque chose de mal. Je pense que peut-être la relative positionnement peut absorber tous les événements pour absolute positionnement? Une pure supposition.
    :hover est censé travailler sur tout ce qui est visible et a une sorte de largeur et de hauteur, et de ne pas avoir quelque chose dérange. Cela comprend inline-blocks. Le comportement ici est un bug.
    BoltClock, vous avez sauvé mon temps avec une seule ligne :hover is supposed to work on anything that is visible and has some sort of width and height Merci!!!!!!!

    OriginalL'auteur Eric

  2. 2

    Si je suis deviner correctement ce que vous êtes en train de faire, alors vous n'avez pas besoin de changer de positionnement ou de tout cela. Le seul changement que je vois que vous vouloir faire est de changer la couleur d'arrière-plan. Voici le violon, j'ai fait de préciser que la réponse.

    Voici le code pour des raisons de lisibilité du souci:

    HTML

    <div class="wrapper">
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <br>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
</div>​

    CSS

    .wrapper {
    height: 600px;
    width: 600px;
    overflow: hidden;
    position: relative;
}

.squareswrapsolo {
    height: 100px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    background: #ccc;
}
.squareswrapsolo:hover {
    background: #000;
}​
    Votre code ne semble pas fonctionner; toutefois, le violon, vous avez établi le lien ne fonctionne pas. Vous lié à son origine.
    Oups! Corrigé, merci Josh.

    OriginalL'auteur cereallarceny