Div flotante al lado de otro div

[joseibarz]

Hola a todos,

Tengo una serie de divs que se muestran uno debajo de otro, como si fuera una tabla.

El caso es que quiero que al pasar por encima de cada uno de ellos, muestre a su izquierda otro div que contiene los links editar y borrar.

Pero sin moverse el contenido del primer div, que es el que tiene el evento mouseover, porque sino baila toda la línea.

Como puedo hacer esto?

Muchas gracias.

[gVenom]

ponle a ese div que aparece position: absolute; , asi no afecta el flujo de los demas div

[mtreik]

Has probado usando float??? debería servirte.
De todas formas, si incluyes parte del código sería más sencillo ayudarte

[sanxuan]

La mejor opciión es usar la propiedad visibilty:hidden para ocultar un elemento y visibilty:visible cuando pasas por encima (:hover).
Puedes usar cualquier tipo de posicionamiento para que el elemento oculto aparezca donde quieras. Usa posición absoluta, relativa o un margen negativo si es necesario.

[joseibarz]

Bien, parece que lo he solucionado siguiendo vuestros consejos.

Os paso el código, como pedíais, por si veis que se puede realizar alguna mejora. Lo que más me intriga es que he puesto el div actions, que es donde se encuentran los botones editar y borrar dentro del div etapa (singleStep), porque así, cuando cambio a encima de los botones, estos siguien siendo visibles.

Se podría hacer esto simplemente con CSS?

Muchas gracias por vuestra ayuda!

Código:

<div class="singleStep" onmouseover="$(this).find('.actions').show();" 
onmouseout="$(this).find('.actions').hide();" id="etapaX">
    
  <div class="actions" style="display:none;position:absolute;margin-left:-34px">
  <img src="images/icons/delete.png" alt="Delete" title="Delete" 
  onclick="deleteStep(X);" />
  <a onclick="EditStep();">Edit</a>
  </div>

  <span ID="stepDescriptionX" CssClass="stepDescription" 
  Text='NOMBREDELAETAPA'></span>

</div>

[sanxuan]

El comportamiento onmouseover es completamente equivalente a la pseudo-clase :hover.
No ocurre lo mismo con la pseudo-clase :active que no equivale a onclick.
Hablo sólo de cambiar propiedades css. No es posible ejecutar fragmentos de código usando css.