jQuery Hover does not work

Asked

Viewed 211 times

0

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á!')
});
javascript jquery

  • You can show us what you got?

  • I have read yes, my question is not misworded.

  • Use the boot edit @Munirbaarini

  • You can post your code so we can better understand the problem?

  • Please see if it’s clearer.

  • to use css you would have to put :after to insert a text in the button, but to change the text you would have to use :after:Hover and it doesn’t work, correct?

  • Now you’ve seen the answers?

Show 2 more comments

4 answers

6


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>

0

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á!');
});

  • It didn’t work Lucas.

  • Sure? Because it’s working here. Do you have an error in the console? Even your code is working. Try clearing your browser cache. Or, test the code from the console.

  • Yes, I’ve cleared the cache.

  • Just to inform, the order of the codes also changes the result. That is, the code to change the class has to come before.

0

Try to use the following:

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

0

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.