0

Tenho um <button> na página que após uma ação recebe uma nova classe, nesta nova classe preciso que no hover o texto seja alterado, porém não funciona, a nova classe parece não ser reconhecida, alguém pode por favor me ajudar?

Depois de uma ação a classe do botão altera de .see-move para .buy:

$('.see-movie').removeClass().addClass('buy').text('Gostou?Adquira já!');

Nesta nova classe ao utilizar o recurso do hover() do jQuery o texto precisa mudar:

$('.buy').hover(function(){
  $(this).text('Ligue 0800 123 4567')
  }, function(){
  $(this).text('Gostou?Adquira já!')
});
7
  • Pode nos mostrar o que tem?
    – BrTkCa
    Commented 29/06/2017 às 16:05
  • Já li sim, minha pergunta não esta mal formulada. Commented 29/06/2017 às 16:08
  • Use o botao editar @MunirBaarini
    – BrTkCa
    Commented 29/06/2017 às 16:08
  • Pode postar seu código pra gente entender melhor o problema? Commented 29/06/2017 às 16:09
  • Vejam por favor se assim esta mais claro. Commented 29/06/2017 às 16:12

4 Respostas 4

6

Você não precisa de Javascript.

Hoje em dia, o css está poderoso o bastante para tratar a grande parte dos problemas relacionados a ações de hover e toggle, o site acima fornece alguns bons exemplos que podem ocorrer no cotidiano e que não requerem mais nenhuma "programação pesada". Ainda creio que, Javascript deveria ser utilizado para tratar algum comportamento que deve ser dinâmico, não para questões visuais como a dessa pergunta. No caso, você tem um elemento com um texto inicial e, quer que esse texto seja alterado quando ocorrer o evento de :hover.

Você pode fazer uso de data-attributes (aqueles atributos que começam com data-*) para definir quais textos devem ser exibidos com e sem hover. E utilizando a função attr é possível obter o valor desse atributo, podendo assim mudá-lo por meio do content.

a {
  background: url(http://lorempixel.com/400/200/technics);
  display: block;
  height: 180px;
  position: relative;
  width: 400px
}

a::after {
  background: rgba(0, 0, 0, .8);
  bottom: 0;
  color: #fff;
  content: attr(data-text);
  padding: 10px 0;
  position: absolute;
  text-align: center;
  width: 100%
}

a:hover::after {
  content: attr(data-text-hover);
  color: gold
}
<a data-text='Ligue: 0800 123 4567'
   data-text-hover='Gostou? Adquira já!'></a>

1
  • Funcionou, obrigado. Commented 29/06/2017 às 18:34
0

Tente assim:

$('.see-movie').toggleClass('buy').text('Gostou?Adquira já!');

$('.buy').hover(function() {
    $(this).text('Ligue 0800 123 4567');
}, function() {
    $(this).text('Gostou?Adquira já!');
});
4
  • Não funcionou Lucas. Commented 29/06/2017 às 16:27
  • Certeza? Porque aqui está funcionando. Da algum erro no console? Até seu código está funcionando. Tente talvez limpar o cache do navegador. Ou, testar o codigo pelo console. Commented 29/06/2017 às 16:28
  • Sim, já limpei o cache. Commented 29/06/2017 às 16:31
  • Só pra informar, a ordem dos códigos também altera o resultado. Ou seja, o código de trocar a class tem que vir antes. Commented 29/06/2017 às 16:32
0

Tente usar o seguinte:

$(document).on('hover','.buy', function(){
  $(this).text('Ligue 0800 123 4567');
}, function(){
  $(this).text('Gostou?Adquira já!');
});
0

Capture os eventos do mouse

Ao invés do hover use os eventos do mouse no nível do documento:

$(document).on("mouseenter", ".buy", function() {   
  $(this).text('Ligue 0800 123 4567');
});

$(document).on("mouseleave", ".buy", function() {
  $(this).text('Gostou?Adquira já!');
});

JSFiddle com um exemplo

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 .