css :hover pseudo-Klasse nicht funktioniert

Habe ich eine CSS - :hover pseudo-Klasse, die nicht produzieren keine Ergebnisse.

Ich war Herumspielen mit einigen image-gallery-code, und ich habe es geschafft, dieses snippet, das funktioniert nicht. Ich kann nicht herausfinden, warum. Einige der seltsameren CSS-Regeln in Bezug auf Größe, die hier sind, weil diese divs enthalten in der Regel Bilder. Ich entfernte die Bilder für Einfachheit, ließ aber die Regeln.

Anderen :hover Elemente auf der gleichen Seite arbeiten.

Ich bin mir nicht sicher, was anderes zu sagen, über das problem, da dies so grundlegend ist. Ich bin wahrscheinlich etwas fehlt wirklich offensichtlich.

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

  • Ich vermute, Sie versuchen zu tun, eine Galerie, und auf hover-CSS verwenden, um das div mit einem Bild gehen Sie in den Vollbildmodus. Ich würde verwenden Sie eine vorhandene JavaScript-Galerie zu tun...
  • Ich habe versucht, einen Weg, es zu tun, nur mit CSS.
  • wenn Sie möchten, um eine next-und previous-Taste und Sie werden am Ende mit JavaScript irgendwie. Und warum das Rad neu erfinden, wenn es bereits bestehende Lösungen wurden getestet auf allen gängigen Browsern. Eine, die viele Menschen verwenden, ist lokeshdhakar.com/projects/lightbox2
  • Ich Schätze, dass es verschiedene Visualisierungs-Bibliotheken und Javascript-fast definitiv ins Spiel kommen, für eine "funktionale" version. Meine Frage war gerichtet auf seltsame CSS-Verhalten in dem, was schien wie funktionalen code.
InformationsquelleAutor iabw | 2012-09-11
  1. 13

    In einigen Fällen (meist mit absolute Positionierung), können Sie nicht anwenden :hover pseudo-Klasse etwas mit display: inline-block;. (Wenn Sie Chrome verwenden, element untersuchen, und fügen Sie die :hover Charakterzug von sich selbst-feststellen, wird es perfekt funktionieren! Der browser funktioniert einfach nicht registrieren, das :hover selbst.)

    So, ich ging voran und ersetzt diese mit float: left;, Hinzugefügt, die eine Marge (zu simulieren, die inline-block Aussehen), und verändert die br zu einem clear. Das Ergebnis ist in dieses jsFiddle.

    • Ich hatte ursprünglich machte Sie inline-Blöcke, so dass Sie würde automatisch die Größe, um die enthaltenen Bilder, aber das war für eine andere Galerie-Stile, die ich Durcheinander mit, die - sind Sie richtig - waren nicht absolut positioniert. Ich denke, die Schwimmer, die hier arbeiten, und ich fühle mich ein wenig dumm, nicht daran zu denken mich. Ich nehme an, nachdem ich bestätigt und getestet.
    • Eric, kennt Ihr zufällig den Grund für diese Diskrepanz mit :hover absolute und inline-block? Ist das ein standard, und warum? Ich finde keine info zu diesem "bug".
    • Ich finde keine offiziellen Berichte, entweder. Ich nehme an, ich bin gerade auf der Suche für die falsche Sache. Ich denke, dass vielleicht die relative Positionierung kann absorbieren alle Veranstaltungen für absolute Positionierung? Rein eine Vermutung.
    • :hover soll die Arbeit auf alles, was sichtbar ist, und hat eine Art von Breite und Höhe, und hat nichts behindert es. Dies beinhaltet inline-blocks. Das Verhalten hier ist ein bug.
    • BoltClock, die Sie gespeichert haben, meine Zeit mit einer einzigen Zeile :hover is supposed to work on anything that is visible and has some sort of width and height Danke!!!!!!
    InformationsquelleAutor Eric
  2. 2

    Wenn ich vermute richtig, was Sie zu tun versuchen, dann brauchen Sie nicht zu ändern, die Positionierung oder nicht. Die einzige änderung die ich sehen kann, Sie machen zu wollen, ist die Veränderung der Hintergrundfarbe. Hier ist die Geige, die ich gemacht, um zu klären, die Antwort.

    Hier ist der code für Lesbarkeit Willen:

    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;
}​
    • Dein code scheint zu funktionieren; doch die Fiedel dir verlinkte funktioniert nicht. Sie verknüpft in seinem original.
    • Hoppla! Korrigiert, danke Josh.
    InformationsquelleAutor cereallarceny
Schreibe einen Kommentar