Problema con "mouseover"

[kenproxd]

Hola,

tengo el siguiente problema: estoy haciendo un menú como el de la imagen:



lo que busco es que al hacer hover en inicio los slash 1 y 2 también cambien de color (como se muestra en la imagen). También que al hacer hover en portafolios cambien de color los slash 2 y 3. He intentado hacerlo con css pero al parecer es imposible, así que opté por trabajarlo con js pero no funciona. Esto es lo que tengo hasta el momento:

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
$("#inicio").mouseover(function() {
     $("#sep1").css({'color':'#4ecbff',});
     $("#sep2").css({'color':'#4ecbff',});
   });
});
</script>
 

Código HTML:

<div id="sep1"> / </div><div id="inicio" onmouseover="mouseover()"> inicio </div><div id="sep2"> / </div>
 

Espero que puedan ayudarme

[maycolalvarez]

¿imposible en CSS?, tan solo necesitas el pseudo-class :hover !!!!!!!!!

[kenproxd]

Gracias por tu respuesta. Lo sé pero en ese caso debería quedar de la siguiente manera:

Código CSS:

#inicio:hover {
   ...
}
#inicio:hover #sep1, #inicio:hover #sep2 {
   ...
}
 

Para que esto funcione el div inicio debe ser contenedor de los div sep1 y sep2. Siendo así, sería complicado acomodar el border-top que es el que también debe cambiar de color. Sólo se me ocurre usar position:absolute pero si lo hago así ya no se consideraría inicio como el div contenedor, por tanto no funcionaría el hover indicado.

[maycolalvarez]

usando clases css es perfectamente posible, no se a que te refieres, puedes conseguir miles de ejemplo de hover css en la web, e incluso algunos muy sofisticados

[kenproxd]

la verdad es que he buscado e intentado de mil formas con css pero no consigo hacerlo. El principal problema es que el slash 2 tiene que cambiar de color tanto al hacer hover en inicio como en portafolios. Es por eso que ahora optaba por el js pero resulta que tampoco puedo.