Efecto de desplazamiento de la imagen de fondo fuera del elemento contenedor

Estoy intentando aplicar un efecto de desplazamiento de la imagen de fondo en cada fila de la tabla css pero necesito que aparezca a la izquierda del elemento contenedor.Efecto de desplazamiento de la imagen de fondo fuera del elemento contenedor

View image http://www.weiserwebworld.com/images/view.gif

¿Alguna idea?

JS:

$(function() { 
    $(".table-row").hover(function() { 
     $(this).addClass("highlight"); 
    }, function() { 
     $(this).removeClass("highlight"); 
    }) 
})

CSS:

#container { 
    width: 660px; 
    margin: 20px auto; 
} 

div .table { 
    display: table; 
    border: 1px red solid; 
} 
div .table-row { 
    display: table-row; 
} 
div .table-cell { 
    display: table-cell; 
    width: 145px; 
    padding: 10px; 
    vertical-align: top; 

} 
.highlight { 
    cursor: pointer; 
    background-image: url('click-to-view.png'); 
    background-position: 0 center; 
    background-repeat: no-repeat; 

}

HTML:

<div id="container"> 
    <div class="table"> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
    </div> 
</div>

Fuente

2011-08-17 YourBudWeiser

Tengo que señalar esto: para una tabla de datos, debe utilizar un '

', no tropecientos de 'div's con' display: table * '.Un '

' es la elección correcta, semánticamente. – thirtydot

Esto es cierto, pero esta es una versión simplificada del código real. Usar tablas no es práctico con el código real que también estamos usando. – YourBudWeiser

@YourBudWeiser: si está usando cosas como 'display: table- *', claramente no le importa IE6. Así que deja de usar jQuery para agregar una clase .highlight y comienza a usar ': hover' en tu CSS. –

Respuesta

En primer lugar, tiran esto:

$(function() { 
    $(".table-row").hover(function() { 
     $(this).addClass("highlight"); 
    }, function() { 
     $(this).removeClass("highlight"); 
    }) 
})

Es una abominación.

A continuación, cambie el selector de CSS .highlight a .table-row:hover. Como claramente no te importa IE6 (donde :hover solo funcionó en elementos a), no hay nada de malo en usar :hover.

Ahora para el resto del problema.

La técnica que me gustaría utilizar para esto es el pseudo-elemento before o after. Algo como esto:

.table-row { 
    position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */ 
} 
.table-row:hover:after { 
    position: absolute; 
    left: -80px; /* Adjust as desired */ 
    content: url(click-to-view.png); /* This makes it an image */ 
}

Hay muchos ajustes que se pueden hacer con esto, pero esa es la idea general. No hay demo en jsfiddle, ya que no me molesta hacer la estructura de la mesa ni obtener una imagen para ella.

Fuente

2011-08-17 15:07:58

También habría ido por la ruta de pseudo-elemento, sin embargo, no funciona en este escenario con 'display: table-row'. Permanece en relación con la ventana y no con la '.table-row'. – tw16

¿No es así? Yo hubiera pensado que sería. Me pregunto si eso podría ser un error del navegador. Ahora voy a la cama, pero lo pondré en mi lista de cosas para investigar cuando tenga tiempo (que nunca será). –

¡Lol, eres un tipo divertido, Chris! Esto de hecho funciona La posición de la izquierda en el ejemplo empuja la imagen fuera de la pantalla, pero simplemente cambia la izquierda a un número positivo y allí está. ¡Gracias! – YourBudWeiser

Es necesario poner su imagen en un DIV, a continuación, posiciona el DIV relativo a la fila. Los fondos no pueden salir del límite de su contenedor.

Fuente

2011-08-17 14:45:06

Puede hacer esto en CSS puro.

Ésta es rápido y sucio, tendrá que ajustar a la forma en que desea, pero la idea general es:

Si indica su fila un id() se puede añadir un estilos CSS como este:

.overlay { 
    display: none; 
    position: absolute; 
    left: -30px; //makes it appear left of box, even though it's technically "in" box. 
} 

#table-row1:hover .overlay { 
    display; block; //Causes div to appear. 
}

Ahora, simplemente agregue con la imagen que desea, que aparecerá a medida que pasa la fila.

Tenga en cuenta que la clase = overlay div DEBE colocarse DENTRO de la id = table-row1 div o el hover-appear no funcionará.

También recomendaría rehacer esto usando etiquetas con el mismo enfoque: hover, ya que su método actual de divs con propiedades de tabla podría volverse difícil de manejar muy rápido.

Fuente

2011-08-17 14:48:24 Terrik

Cuestiones relacionadas