2

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>

0

1 Resposta 1

3

O seu problema é estar a usar o .find() que procura descendentes do this. Se usar .next() já vai funcionar pois o topoMenuBarra não é descendente da acora mas sim sibling. (já agora .siblings() também funcionaria).

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

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

Exemplo com 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>


Na verdade isto pode ser feito só com CSS e não precisa da div em baixo.

Precisa só de: http://jsfiddle.net/hxa6zzwy/2/

.topoMenu a:hover {
   border-bottom: 4px #bbbbbb solid;
}
6
  • 1
    Exato cara, eu não havia percebido esse detalhe. Muito obrigado. Commented 18/11/2014 às 19:29
  • @FelipeStoker juntei uma variante só com CSS, acho melhor...
    – Sergio
    Commented 18/11/2014 às 19:46
  • como eu daria uma margem nessa borda? Commented 19/11/2014 às 11:11
  • @FelipeStoker será no padding-bottom. jsfiddle.net/hxa6zzwy/3
    – Sergio
    Commented 19/11/2014 às 11:52
  • 1
    @FelipeStoker a linha extra é ativada pelo a:hover então se a linha extra estiver visivel o click vai abrir o link.
    – Sergio
    Commented 19/11/2014 às 11:58

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 .