Color de botón, en evento hover

[elkevin]

¡Buenas tardes gente!,

Les comento mas o menos en que ando, tengo un menú vertical desplegable hehco puramente con CSS, en base a <ul>. El mismo se desempeña correctamente, pero quiero añadir algo mas.

Mi idea es, que al estar posicionado sobre cualquier elemento del menú, que no pertenezca al primer nuevel, haga que el elemento del primer nivel del que proviene, cambie de color.

Por ejemplo, con un selector como este ul.CSSMenu li:hover hago que todos los elementos de donde provienen tomen un color.

Ahora lo que estoy buscando, es que al posicionarme sobre cualquier elemento, haga que solo el primero de sus padres, cambie de color, ¿me explico?.

¡Desde ya muchas gracias!.

[kokoou]

creo que solo lo podrías lograr con javascript.

[elkevin]

¡Muchas gracias por responder colega!.

Pucha, que macana...

A ver, explico un poco mejor lo que quiero hacer.

Quiero que al pararme sobre cualquier <li> de la lista, solo el primero de los <li> sea afectado.

En una lista como esta:

Código HTML:

<ul class="CSSMenu">
  <li class="padre">Categoria principal
    <ul>
      <li><a href="vinculo.html"           >Categoria</a></li>
      <li><a href="vinculo.html"           >Categoria</a></li>
      <li><a href="vinculo.html"           >Categoria</a></li>
    </ul>
  </li>
  <li>Categoria principal
    <ul>
      <li>
        <ul>
          <li><a href="vinculo.html"           >Categoria</a></li>
          <li><a href="vinculo.html"           >Categoria</a></li>
        </ul>
      </li>
      <li><a href="vinculo.html"           >Categoria</a></li>
      <li><a href="vinculo.html"           >Categoria</a></li>
    </ul>
  </li>
  <li><a href="vinculo.html"           >Categoria principal</a></li>
</ul> 

De este modo, lograría afectar solo a los <li> que dicen "Categoria principal" por así decirlo.

Bueno, nuevamente ¡muchas gracias!.

[sheerrmaan]

Con css tambien se puede, a cada li ponele
<li class="out" onMouseOver="getelementbyid('uno').className='on'" >blabla</li>
menos al padre que le tenes que poner:
<li id="uno" class='out'>
-----------------------------------------
Despues la funcion seria
<style type="text/css">
td.off {
background: #ffffff;
}
td.on {
background: #cccccc;
text-decoration:underline;
}
</style>
Por ejemplo. Si tengo algo mal q me corrijan

[sheerrmaan]

en la funcion reemplaza td.on por li.on

[elkevin]

¡Mil gracias sheerrmaan!, ¡sigo la idea!.

Me decís que con CSS también se puede, ¿te referís a CSS sin el uso de JS?, por que si es así, me viene mucho mejor, ya que quiero evitar cuanto mas puedo Scripts de JS.

Si tenés una idea de hacerlo puramente con CSS, chilame :)

¡Nuevamente gracias muchachos!.

[kokoou]

en css, no podés indicar en el hover de un elemento que se modifique un atributo de otro elemento, no se si me entiendo. No se puede hacer!!!

Lo más fácil es hacer un estilo que tenga los atributos del boton en estado activo y en el hover de un elemento darle la clase activa al otro elemento ( pero esto se puede solo por medio de js ).