1

Eu tenho uma div, que contem um texto dentro, quando eu passo o mouse em cima dela, uma outra div, que e uma pequena barra de height:3px, deixa de ser display:none e fica display:block, até ai tranquilo, está tudo funcionando. Porém, eu gostaria que a largura dessa barra fosse igual ao tamanho da div que eu passei o mouse em cima.

Por exemplo:

<div>PALAVRA</div>
<div class="barra" style="display:none"></div>

O meu Jquery está correto:

$( ".internaMenu:eq(0)" ).hover(function() {
$( this ).find('.internaMenuBarra').css({'display':'block','width':'85px'});
    },
function() {
$( this ).find('.internaMenuBarra').css('display','none');
    });

Eu defini tamanho no Jquery apenas para fazer um teste.

1 Resposta 1

1

Tem de ir buscar o tamanho do this e depois passar para dentro do .css()

Teste assim:

$(".internaMenu:eq(0)").hover(function () { // também pode usar ".internaMenu:first"
    var $this = $(this);
    var largura = $this.width(); // ir buscar a largura do elemento com hover
    $this.find('.internaMenuBarra').css({
        'display': 'block',
        'width': largura + 'px'
    });
}, function () {
    $(this).find('.internaMenuBarra').css('display', 'none');
});

Note que no seu código os elementos são siblings, e não descendentes. Se o seu código exemplo estiver correto, então deve usar $this.next()

Exemplo: http://jsfiddle.net/Rhk6U/

1
  • 1
    Funcionou perfeitamente. Exatamente o que eu esperava. Muito obrigado. 18/06/2014 às 12:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .