Problema com switch background

[natoochrno]

Oi gente, eu não sabia em qual lugar colocar esse tópico, já que ele abrange HTML, CSS, jQuery e menciona PHP. Aí eu coloquei aqui mesmo, qualquer coisa avisem onde é pra por a dúvida no lugar certo ;)

Fiquei alguns dias tentando resolver isso sozinho, mas acho que não deu muito resultado, por isso venho aqui pedir a opinião de vocês.

Estou modificando um menu o qual quando se passa o mouse em um dos itens(Home, Sobre, Contato...), o selector fica em cima do mesmo, com certo gradiente de background.

E o seletor desliza até o item que o mouse aponta.

Até aí, tudo muito bem.

O problema é que eu tive a ideia de tentar fazer com que quando o mouse passasse por cada item, a cor do gradiente do seletor mudasse também. Uma vez por cada item, tipo: se está no home, rosa. Se está no ajuda, azul, se no contato, verde e assim vai.

Aí que veio minha desgraça: Tentei trocar o valor do gradiente pelo php(usando um echo, dentro da classe), não deu. Tentei mudar a classe, não deu. Tentei mudar o .CSS e chamá-lo externamente, piorou. Tentei fazer uma classe pra cada item da ul, mas me enrolei com o z-index.

Seguem os códigos:

HTML

<div id="DESCMENU" class="DESCMENU">
  <div><span>DESCRICAO_SOBRE</span></div>
  <div><span>DESCRICAO_PORT</span></div>
  <div><span>DESCRICAO_CONT</span></div>
</div>
 <ul class="MENU" id="MENU" name="MENU">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contato</a></li>
</ul>

CSS

body, ul, li, h1, h2, span{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
body{
    background:#292929;
}
.MENU {
    position: absolute;
    height:410px;
    width: 410px;
    top:40px;
    overflow:hidden;
    right:1px;
    font-family: Arial, Helvetica, sans-serif;
}
.MENU li {
    display:block;
    float:right;
    clear:both;
    position:relative;
    overflow:hidden;
}
.MENU li.move {
    width: 9px;
    height: 68px;
    right:0px;
    padding-right:10px;
    margin-top:2px;
    z-index: 8;
    position: absolute;
    background: #2183c4;
    background: -moz-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
    background: -webkit-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
    -moz-border-radius: 8px 0px 0px 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
}
.MENU li a {
    font-size:66px;
    text-transform:uppercase;
    text-decoration: none;
    color: #ddd;
    outline: none;
    text-indent:5px;
    z-index: 10;
    display: block;
    float: right;
    height: 66px;
    line-height: 66px;
    position: relative;
    overflow: hidden;
    padding-right:10px;
}
.DESCMENU{
    margin-top:40px;
    position:relative;
}
.DESCMENU div{
    background: #2183c4;
    background: -moz-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
    background: -webkit-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
    height: 68px;
    padding-right:5px;
    left:-5px;
    width:0px;
    margin-top:2px;
    overflow:hidden;
    position:absolute;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    -moz-border-radius: 0px 8px 8px 0px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.DESCMENU div span {
    font-size:36px;
    color: #f0f0f0;
    text-indent:5px;
    z-index: 10;
    display: block;
    height: 66px;
    line-height: 66px;
    position:absolute;
    right:10px;
    margin-left:5px;
    top:-3px;
}
span.reference{
    position:fixed;
    left:10px;
    bottom:10px;
    font-size:14px;
}
span.reference a{
    color:#aaa;
    text-decoration:none;
}

JQUERY

$(function() {
    Cufon.replace('a, span').CSS.ready(function() {
         var $menu=$("#MENU");
         var $selected= $menu.find('li:first');
         var $moving=$('<li />',{className:'move',top:$selected[0].offsetTop+'px',width:$selected[0].offsetWidth + 'px'});
     $('#DESCMENU > div').each(function(i) {
         var $this = $(this);$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');});
     $menu.bind('mouseleave',function(){moveTo($selected,400);})
     .append($moving)
     .find('li')
     .not('.move')
     .bind('mouseenter',function(){
         var $this = $(this);
         var offsetLeft = $this.offset().left - 20;
         $('#DESCMENU > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
         moveTo($this,400);})
     .bind('mouseleave',function(){
         var $this = $(this);
         var offsetLeft = $this.offset().left - 20;
         $('#DESCMENU > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');});;
     function moveTo($elem,speed){
         $moving.stop(true).animate({
             top: $elem[0].offsetTop + 'px',
             width: $elem[0].offsetWidth + 'px'
            }, speed, 'easeOutExpo');}});});

[atkins]

Cara só com esse pedacinho de código fica dificil hehe, mas vamo tenta mesmo assim... pelo que entendi, você quer mudar o estilo de cada um dos itens, mas pelo jeito com class não deu certo, tem outro modo, um pouco mais chato, mas primeiro explica melhor qual foi exatamente o problema com o class...

De preferencia poste o que você tinha feito...

Editado Dezembro 18, 2012 por atkins