Hover descoloca elementos

nohack · #1 (**permalink**) 02/03/2011, 07:22

Buenas!

He hecho un script en el que al pasar el ratón por un elemento lo recuadra añadiendo un borde y cuando sale se lo quita.

Mi problema viene en que cuando recuadra los elementos descoloca a los demás desplazándolos y es muy molesto.

Este es mi código:

Código Javascript:

Ver original$("body :nth-child(n)").bind('mouseover', function(e){
    e.stopPropagation();
            ($(this).not("#dialog :nth-child(n),.ui-dialog :nth-child(n),#opener :nth-child(n)")).css({border: "2px solid #6DA6D1"})
                }).mouseout(function(){
            $(this).css("border", "none");
    });

He probado con z-index pero como yo lo he hecho no ha funcionado, pero creo que es porque no he sabido como poner el borde en otra profundidad distinta al de los elementos y así evitar que se muevan.

Si alguien sabe como poner un borde a otra profundidad o alguna manera alternativa para hacerlo estaría muy agradecido.

Gracias a todos!!

lktmaster · #2 (**permalink**) 02/03/2011, 09:15

Creo que deverias ponerle

Código HTML:

 $(this).css({border: "2px transparent"});

o algo por el estilo para que no te cambiara la posición con el borde.

La otra opcion casi mas sencilla seria poner "position:absolute"

Para que no dependieran los elementos la posición de cada uno.

marlanga · #3 (**permalink**) 02/03/2011, 13:23

Solo diré que el borde se suma al width del elemento 2 veces (obviamente), así que al crecer, en tu caso 4 pixeles, arrastrará a todos los elementos que haya después, sobre todo si es un div flotante.
No sé cómo está el maquetado, pero prueba a hacer esos elementos un poco más pequeños para que cuando uno crezca, el desplazamiento del elemento más a la derecha no salte a la siguiente línea o lo que sea.

O prueba a restarle el doble del ancho del borde al width y al height, y luego a sumárselos en el mouse out.
Ej:

Código HTML:

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	</head>
	<style>
		div {float:left; width: 200px; height:50px; background: red; margin: 20px; }
	</style>
	<script>
		$(function(){
			$("div").hover(
				function(){
           		$(this).css({width: "180px", height: "30px", border: "10px solid blue"});
	      	},
	      	function(){
           		$(this).css({width: "200px", height: "50px", border: "none"});
	      	}
        );
		});
	</script>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>