css: hover pseudo-class no funciona

Tengo una clase de CSS :hover pseudo-class que no está produciendo ningún resultado.css: hover pseudo-class no funciona

Estaba jugando con algún código de la galería de imágenes, y he logrado obtener este fragmento que no funciona. No puedo entender por qué. Algunas de las reglas de CSS más extrañas con respecto al tamaño aquí se deben a que estos divs normalmente contienen imágenes. Quité las imágenes por simplicidad, pero dejé las reglas en.

Otros :hover elementos en la misma página están funcionando.

No estoy seguro de qué más decir sobre el problema, ya que esto es muy básico. Probablemente me esté perdiendo algo realmente obvio.

jsFiddle aquí - http://jsfiddle.net/GbxCM/

Fuente

2012-09-11 iabw

Supongo que estás tratando de hacer una galería, y al pasar el mouse usa CSS para hacer que el div que contiene una imagen entre en pantalla completa. Usaría una galería de JavaScript existente para hacer eso ... – mb21

Estaba intentando hacer una forma de hacerlo con solo CSS. – iabw

si también desea tener un botón siguiente y anterior, terminará usando JavaScript de todos modos. Y por qué reinventar la rueda si existen soluciones existentes que han sido probadas en todos los principales navegadores. Uno que mucha gente usa es http://lokeshdhakar.com/projects/lightbox2/ – mb21

En algunos casos (sobre todo con absolute posicionamiento), no se puede aplicar una :hover pseudo-clase a tan mething con display: inline-block;. (Si tiene Chrome, utilice inspeccionar elemento y añadir la :hover Rasgo sí mismo - aviso, que funcione a la perfección desde el browser no registra el :hover sí mismo!).

Así, seguí adelante y sustituye esto con float: left; , agregó un margen (para simular el aspecto inline-block) y cambió el br por un clear. El resultado está en this jsFiddle.

Fuente

2012-09-11 00:43:26 Eric

Originalmente, los hice bloques en línea para que cambiaran el tamaño automáticamente de las imágenes que contenía, pero eso fue para uno de los otros estilos de galería con los que estaba metiéndome, lo cual, tienes razón, no estuviste absolutamente posicionado. Creo que el flotador funcionará aquí, y me siento un poco tonto por no pensar en él. Lo aceptaré después de que haya confirmado y probado. – iabw

Eric, ¿conoce la razón de esta discrepancia con: hover, absolute y inline-block? ¿Es esto un estándar y por qué? No puedo encontrar ninguna información sobre este "error". – iabw

No puedo encontrar ningún informe oficial, tampoco.Supongo que estoy buscando algo equivocado. Creo que tal vez el posicionamiento "relativo" pueda absorber cualquier evento para el posicionamiento "absoluto". Solo una conjetura. – Eric

Si estoy adivinando lo que estás tratando de hacer, entonces no es necesario cambiar el posicionamiento o nada de eso. El único cambio que puedo ver que quieres hacer es cambiar el color de fondo. Here's the fiddle I made to clarify that response.

Aquí está el código para el bien de la legibilidad:

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

Fuente

2012-09-11 00:38:54 cereallarceny

Su código parece funcionar; sin embargo, el violín al que vinculó no funciona. Has vinculado en su original. –

¡Vaya! Corregido, gracias Josh. – cereallarceny

css: hover pseudo-class no funciona

Respuesta

Cuestiones relacionadas