Width of an element calculated with jQuery

Question

Here’s what I want. When I hover over the li, the div topoMenuBarra cease to be display:none to be display:block, and the width the div is equivalent to a that exists within the li.

He’s taking as wide as the li. I’ve already informed the $( ".topoMenu li a" ).hover(function() without the a and it doesn’t work.

$(document).ready(function(){

	$( ".topoMenu li a" ).hover(function() {
		var $this = $(this);
		var largura = $this.width();
		$( this ).find('.topoMenuBarra').css({
			'display':'block',
			'width': largura + 'px'
		});
	},
	function() {
		$( this ).find('.topoMenuBarra').css('display','none'); /*fazer barra desaparecer*/
	});

});

.topoMenu li {
    font: 300 20px/20px'Ubuntu', sans-serif;
    color: #fff;
    float: left;
}
.topoMenu li img {
    margin-right: 95px;
    margin-top: 44px
}
.topoMenu li a {
    margin-top: 62px;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.topoMenuBarra{
height: 2px;
background-color: #ced1d7;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<li>
    <a href="/empresas">empresa</a>
	<div class="topoMenuBarra"></div>
</li>

Answer 1

Your problem is you’re using the .find() who seeks descendants of this. Use .next() will already work because the topoMenuBarra is not a descendant of Cora but sibling. (by the way .siblings() would also work).

jsFiddle: http://jsfiddle.net/hxa6zzwy/1

Use like this: $this.next('.topoMenuBarra').css({

Example with jQuery:

$(document).ready(function(){

	$( ".topoMenu li a" ).hover(function() {
		var $this = $(this);
		var largura = $this.width();
		$this.next('.topoMenuBarra').css({
			'display':'block',
			'width': largura + 'px'
		});
	},
	function() {
		$(this).next('.topoMenuBarra').css('display','none'); /*fazer barra desaparecer*/
	});

});

.topoMenu li {
    font: 300 20px/20px'Ubuntu', sans-serif;
    color: #fff;
    float: left;
}
.topoMenu li img {
    margin-right: 95px;
    margin-top: 44px
}
.topoMenu li a {
    margin-top: 62px;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.topoMenuBarra{
height: 2px;
background-color: #ced1d7;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="topoMenu">
<li>
    <a href="/empresas">empresa</a>
	<div class="topoMenuBarra"></div>
</li>
</ul>

---

Actually this can be done only with CSS and does not need the div below.

It just needs: http://jsfiddle.net/hxa6zzwy/2/

.topoMenu a:hover {
   border-bottom: 4px #bbbbbb solid;
}