Jquery Header add class on hover [duplicate]

Question

I´m trying to add a hover function which adds a class to my header. I already got this code which does the same but on scroll.

  $(document).ready(function(){
  jQuery(window).trigger('resize').trigger('scroll');

    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll >= 1 ) {
        header.removeClass('scroll').addClass("cover");
        $('#phantom').show();
        $('#phantom').css('height', Heightcalculate+'px');
             } else {
        header.removeClass("cover").addClass('scroll');
        $('#phantom').hide();
      }
    });

Is there a way to edit this existing code so it does the same but on hover? i tried everything i could think of and it wouldn´t work. Thanks in advance.

Have you tried .hover() function?

Satpal
– Satpal

2017-02-24 20:33:58 +00:00
Commented Feb 24, 2017 at 20:33 — Satpal
– Satpal, Commented Feb 24, 2017 at 20:33
api.jquery.com/hover

Furious Mountain
– Furious Mountain

2017-02-24 20:34:42 +00:00
Commented Feb 24, 2017 at 20:34 — Furious Mountain
– Furious Mountain, Commented Feb 24, 2017 at 20:34
Try $("elemnt").hover()

Nadim
– Nadim

2017-02-24 20:35:01 +00:00
Commented Feb 24, 2017 at 20:35 — Nadim
– Nadim, Commented Feb 24, 2017 at 20:35

Michael Coker · Accepted Answer · 2017-02-24 20:34:42Z

0

Without seeing all of your code, it's hard to tell you exactly what to do, but this is the general idea using jQuery's $.hover(). Apply the class on hover, and optionally remove the class when you hover off.

$('header').hover(function() {
  $(this).addClass('class');
}, function() {
  $(this).removeClass('class');
});

.class {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>header</header>

answered Feb 24, 2017 at 20:34

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geatrix Over a year ago

i already tried this... doesn´t work.

Michael Coker Over a year ago

@Geatrix then you need to give us a working demo so we can give you more accurate code that will work for you. Otherwise we're just taking guesses.

Geatrix Over a year ago

I can´t, because i´m using shopify and im editing a theme that isn´t active and only i can preview it. should i send you the header.liquid file?

Collectives™ on Stack Overflow

Jquery Header add class on hover [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related