jQuery Hover does not work

Question

I have a <button> on the page that after an action receives a new class, in this new class I need the text to be changed in the Hover, but it doesn’t work, the new class seems not to be recognized, someone can please help me?

After an action the class of the button changes from . see-move to . buy:

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

In this new class when using jQuery’s Hover() resource the text needs to change:

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

Answer 1

You don’t need Javascript.

Nowadays, css is powerful enough to address much of the problems related to Hover and toggle actions, the above site provides some good examples that can occur in everyday life and that no longer require any "heavy programming". I still believe that, Javascript should be used to treat some behavior that should be dynamic, not for visual issues like this question. In this case, you have an element with an initial text and you want this text to be changed when the :hover.

You can make use of data-Attributes (those attributes that start with data-*) to define which texts should be displayed with and without Hover. And using the function attr it is possible to obtain the value of this attribute and can thus change it through the 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>

Answer 2

Try it like this:

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

---

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

Answer 3

Try to use the following:

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

Answer 4

Capture the mouse events

Instead of hover use mouse events at document level:

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

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

Jsfiddle with an example