Me pudieran ayudar a crear un código

rafret · #1 (**permalink**) 29/06/2017, 23:28

Hola a todos el foro, a ver si me pudieran auxiliar con el siguiente pedido, en realidad no quiero que me escriban el código completo, pero si me pueden ir dando pistas:)

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>

<div>
<!--aqui carga de base-->
	<div id='#arriba'>
	<!--cargara con php aqui la base-->
	<!--nombre de Elemento-->
	<!--imagen-->
	</div>

	<div>
	<!--Aqui boton ver más-->
		<!--Utilizando Jquery, quiero que al hacer un mouseOver sobre el boton, que el div '#arriba' [HIGHLIGHT="HTML"][/HIGHLIGHT]realice un evento, mi problema es que si lo hago con un id no me funciona porque  el estilo para el id solo le funciona al primero y no para el resto de divs, si lo hago con clases el evento se genera para todos los divs, estuve intentando hacerlo con atributos pero ya me di por vencido, a ver si me  pudieran ayudar. Garcias-->
	</div>
</div>



</body>

rafret · #2 (**permalink**) 29/06/2017, 23:31

holas, aqui un ejemplo de lo que quiero hacer segun lo que explicaba... :I

http://jofret.com/alfemach/

xfxstudios · #3 (**permalink**) 30/06/2017, 13:14

1.- Utiliza como id la id que viene de tu base de datos para cada div
2.- Utiliza un data atributo en tu boton que apunte a esa id
3.- En Jquery Captura el evento del mouse sobre boton y realiza el toggle de la clase sobre el div

Ejemplo:

Código Javascript:

Ver original$("boton").on('mouseover',function(event) {
    var id = $(this).attr('data-id');
    $("#"+id).addClass('loquesea');
});
 
$("boton").on('mouseleave', function(event) {
    var id = $(this).attr('data-id');
    $("#"+id).removeClass('loquesea');
});

algo así podria ser, prueba a ver

rafret · #4 (**permalink**) 30/06/2017, 16:14

Hola Gracias, voy a probarlo

Gracias otra vez

rafret · #5 (**permalink**) 30/06/2017, 17:48

Muchas Gracias. Me sirve mucho.

Saludos

rafret · #6 (**permalink**) 30/06/2017, 18:48

Hola, mira esto fue lo que hice:

Pero hay una falla se me queda pegado el color amarillo, que me recomendarías?

asi quedó: http://jofret.com/JQUERY/nueva.php

Código HTML:

<style>
.deFecto{
	height:100px;
	width:100px;
	background:blue;
	color:black;
	padding:30px;
}
.deFecto:hover{
	cursor:pointer;
}
.efecto{

	width:100px;
	background:yellow;
	color:white;}

</style>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
	$('button').on('mouseover',function(event){
		var id=$(this).attr('data-atributo');
		$('#'+id).addClass('efecto');
		$('#'+id).html('precios de locura descuentos hasta de 70%');
	});
	
	$('button').on('mouseleave',function(event){
		var id=$(this).attr('data-atributo');
		$('parent#'+id).removeClass('efecto');
		$('#'+id).empty();
	});
});
</script>

Gracias!!

rafret · #7 (**permalink**) 30/06/2017, 18:52

Hola otra vez, ya lo solucione quitandole el parent

Graxias!!

Cita:

$('parent#'+id).removeClass('efecto');