[SOLUCIONADO] cambiar color

marcelocuiza_de · #1 (**permalink**) 04/04/2013, 15:17

el problema es el siguiente:

como puedo cambiar el color de un campo a partir de otro eje

Código HTML:

Ver original<h1 id="title">hola mundo</h1>
 
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
 
<h1 id="titledos">hola mundo dos</h1>
 
<div id="unoa"></div>
<div id="dosb"></div>
<div id="tresc"></div>

si estoy en el id="uno" o "dos" o "tres" que mi <h1 id="title">cambie de color y el
<h1 id="titledos"> no sufra cambios o viceversa si estoy en el id="unoa" o "dosb" o "tresc" que mi <h1 id="titledos">cambie de color y el
<h1 id="title"> no sufra cambios

help!!!

Carlangueitor · #2 (**permalink**) 04/04/2013, 16:12

¿Quieres hacerlo de manera dinámica? Por que así como lo cuentas con CSS debería ser suficiente.

Saludos

marcelocuiza_de · #3 (**permalink**) 04/04/2013, 16:16

de manera dinamica, en tiempo real..

Carlangueitor · #4 (**permalink**) 04/04/2013, 16:20

Ya releí tu mensaje, solo que me queda esto:

Cita:

Iniciado por marcelocuiza_de

si estoy en el id="uno" o "dos" o "tres"

¿A que te refieres con eso? ¿a que sea un evento hover? ¿a que el scroll esté a la altura de esos elementos?

marcelocuiza_de · #5 (**permalink**) 04/04/2013, 16:28

es un evento onclick

cada cierto grupo de divs o cualquier otra etiqueta tiene un titulo, titulo que deberá cambiar de color cuando me posicione en uno de sus elementos.

Código HTML:

Ver original/////// grupo 1
<h1 id="title">hola mundo</h1> /// titulo grupo 1
 
<div id="uno"></div> 
<div id="dos"></div>
<div id="tres"></div>
 
////// fin grupo 1 
 
/////// grupo 2
<h1 id="titledos">hola mundo dos</h1> /// titulo grupo 2
 
<div id="unoa"></div>
<div id="dosb"></div>
<div id="tresc"></div>
 
////// fin grupo 12

Rosencrantz · #6 (**permalink**) 04/04/2013, 17:20

versión jquery, hacerlo en puro js lo veo engorroso, no digo que no se pueda.

http://jsfiddle.net/3aQrf/

marcelocuiza_de · #7 (**permalink**) 04/04/2013, 17:28

la verdad que si.. pero lamentable no puedo usar jquery por temas de compatibilidad...

algo parecido a find() de jquery en js?

emprear · #8 (**permalink**) 04/04/2013, 18:21

Lo más práctico en js puro, requeriría alterar un poco la estructura pero sería lo más simple, se puede hacer igual sin agregar ese div extra, pero ya es más complicado

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function cambiaColor(e){
if (document.all && document.querySelector && !document.addEventListener) { // <-- compatibilidad IE8
e.previousSibling.style.color = 'red';
}else{
e.previousSibling.previousSibling.style.color = 'red';
}
}
//]]>
</script>
</head>
<body>
<h1>hola mundo</h1>
<div onmouseover="cambiaColor(this);">
<div id="uno">a</div>
<div id="dos">b</div>
<div id="tres">c</div>
</div>
<h1 id="titledos">hola mundo dos</h1>
<div onmouseover="cambiaColor(this);">
<div id="unoa">d</div>
<div id="dosb">e</div>
<div id="tresc">f</div>
</div>
</body>
</html>

Saludos

marcelocuiza_de · #9 (**permalink**) 05/04/2013, 12:42

pues si, tuve que modificar la estructura y usando parentNode me funciono bien...
gracias