Error con unas div y show de query

[patilanz]

Hola he hecho que se muestra una div al estar sobre el raton en otra div(id="vista") que contiene tambien mas divs pero el problema esta cuando el raton esta sobre uno de los div que estan en "vista" y sale de el entrando en otro div de "vista" la div que debe mostrarese se quita y aparece de nuevo aunque el raton se mantiene en la div "vista"...

Aqui esta :

Código HTML:

<div id="vista" style="display:none;" onmouseover="view_change_on();" onmouseout="view_change_off();">
<div id="vista_t"><img src="images/todo_p.gif" width="74" height="90" style="border-radius:14px;" /></div>
<div id="vista1"></div>
<div id="vista2"></div>
<div id="vista3"></div>
<div id="vista4"></div>
<div id="vista5"></div>
<div id="vista6"></div>
<div id="vista7"></div>
<div id="vista8"></div>
<div id="vista9"></div>
</div>
<div id="view">Смени гледката</div>
 

Funciones javascript:

Código Javascript:

function view_change_on(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','green');
    }
    $('#view').stop('fx',true,true).show(500);
}
function view_change_off(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','#333');
    }
    $('#view').stop('fx',true,true).hide(500);
}
 

Como puedo solucionar lo??

[jonni09lo]

Hola eso ocurre porque los divs hijos del contenedor principal heredan tambien el evento onmouseout del padre, puedes usar stopPropagation de jQuery info aqui

[patilanz]

Iniciado por jonni09lo

Hola eso ocurre porque los divs hijos del contenedor principal heredan tambien el evento onmouseout del padre, puedes usar stopPropagation de jQuery [URL="http://api.jquery.com/event.stopPropagation/"]info aqui[/URL]

Gracias por tu respuesta y probe asi:

Código Javascript:

function view_change_on(){
    event.stopPropagation();
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','green');
    }
    $('#view').stop('fx',true,true).show(500);
}
function view_change_off(){
    event.stopPropagation();
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','#333');
    }
    $('#view').stop('fx',true,true).hide(500);
}
 

pero queda lo mismo.
Se puede hacer tambien en javascript embez de query?

Un saludo

[jonni09lo]

Hola, ps mira en javascript no he visto eso no se si habra algo parecido, aunque creo que si, con respecto a tu codigo mira esto:

Código HTML:

<div id="vista" style="display:none;padding:5px;" onmouseout="view_change_off();">
    <div id="vista_t" ><img src="img.jpg" width="74" height="90" style="border-radius:14px;" /></div>
    <div id="vista1">1</div>
    <div id="vista2">2</div>
    <div id="vista3">3</div>
    <div id="vista4">4</div>
    <div id="vista5">5</div>
    <div id="vista6">6</div>
    <div id="vista7">7</div>
    <div id="vista8">8</div>
    <div id="vista9">9</div>
</div>
<div id="view" onmouseover="view_change_on();">Hola</div>
 

y este es el javascript

Código Javascript:

function view_change_on(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','green');
    }
    $('#vista').stop('fx',true,true).show(500); 
}
$("#vista div").mouseleave(function(event){
    event.stopPropagation();
});  
function view_change_off(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','#333');
    }
    $('#vista').stop('fx',true,true).hide(500);
}
 

si miras la parte de stopPropagation, solo lo estoy aplicando a los elementos hijos del contenedor principal y no al contenedor principal como tal espero que te sirva

Saludos

[patilanz]

Iniciado por jonni09lo

Hola, ps mira en javascript no he visto eso no se si habra algo parecido, aunque creo que si, con respecto a tu codigo mira esto:

Código HTML:

<div id="vista" style="display:none;padding:5px;" onmouseout="view_change_off();">
    <div id="vista_t" ><img src="img.jpg" width="74" height="90" style="border-radius:14px;" /></div>
    <div id="vista1">1</div>
    <div id="vista2">2</div>
    <div id="vista3">3</div>
    <div id="vista4">4</div>
    <div id="vista5">5</div>
    <div id="vista6">6</div>
    <div id="vista7">7</div>
    <div id="vista8">8</div>
    <div id="vista9">9</div>
</div>
<div id="view" onmouseover="view_change_on();">Hola</div>
 

y este es el javascript

Código Javascript:

function view_change_on(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','green');
    }
    $('#vista').stop('fx',true,true).show(500); 
}
$("#vista div").mouseleave(function(event){
    event.stopPropagation();
});  
function view_change_off(){
    for(c=1;c<10;c++){
        $('#vista'+c).css('background-color','#333');
    }
    $('#vista').stop('fx',true,true).hide(500);
}
 

si miras la parte de stopPropagation, solo lo estoy aplicando a los elementos hijos del contenedor principal y no al contenedor principal como tal espero que te sirva

Saludos

Lo probe pero ahora la div que debe mostrarese (del mensaje) se queda alli... igual si retiras el raton... :(

Un saludo

[jonni09lo]

Hola, lo probaste con esta parte?
<div id="vista" style="display:none;padding:5px;" onmouseout="view_change_off();">

Pq ese padding es importante, si tiene un contenedor sin ese padding, sera imposible que el raton pase por el ccontenedor padre ya que este esta totalmente tapado con los hijos, si ccolocas ese padding, habra un espacio en donde el raton pase sobre el padre y por ende ocultandolo

Saludos

[patilanz]

Iniciado por jonni09lo

Hola, lo probaste con esta parte?
<div id="vista" style="display:none;padding:5px;" onmouseout="view_change_off();">

Pq ese padding es importante, si tiene un contenedor sin ese padding, sera imposible que el raton pase por el ccontenedor padre ya que este esta totalmente tapado con los hijos, si ccolocas ese padding, habra un espacio en donde el raton pase sobre el padre y por ende ocultandolo

Saludos

Si, ahora si y queda lo mismo...
T.T
Un saludo