Eu quero o seguinte.
Quando eu passe o mouse em cima do li
, a div topoMenuBarra
deixe de ser display:none
para ser display:block
, e a width
da div seja equivalente ao a
que existe dentro do li
.
Ele está pegando como largura o li
.
Eu já informei o $( ".topoMenu li a" ).hover(function()
sem o a
e não funciona.
$(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>