How to capture the size of a div where the value has not been set

Question

I have a div, which contains a text inside, when I pass the mouse over it, another div, which is a small bar of height:3px, no longer be display:none and it gets display:block, So far quiet, everything’s working. However, I would like the width of this bar to be equal to the size of the div I hovered over.

For example:

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

My Jquery is correct:

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

I set size in Jquery just to take a test.

Answer 1

You have to get the size of this and then move into the .css()

Test like this:

$(".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 that in your code the elements are siblings, not descendants. If your sample code is correct, then you should use $this.next()

Example: http://jsfiddle.net/Rhk6U/