If Else CSS Hovercode not working in jQuery

Question

I have six buttons at the foot of my webpage, each with a hidden "popup" div that rises and fades in when you hover over the button. This functionality works, but because the buttons are close together you can often get two buttons overlapping when you switch hovering from one button to another very quickly.

I've tried to build some jQuery code to only allow the css 'rise and fade in' change to happen if all the other popups are below the bottom of the page. This will allow all the popups to reset before the currently-hovered button will raise its popup.

Unfortunately, the code is not working. None of the popups are now changing their css on hover.

This is the code from one particular button.

$('#chrome').hover(
            function () {

                if (
                $("#inuithoverpopup").css("bottom") < '-130%' &&
                $("#bloghoverpopup").css("bottom") < '-130%' &&
                $("#cchoverpopup").css("bottom") < '-130%' &&
                $("#cwlhoverpopup").css("bottom") < '-130%' &&
                $("#blhoverpopup").css("bottom") < '-130%' &&
                ) {
              $('#chromehoverpopup').animate({
                     opacity: '1',
                     bottom: '95%'
              }, 300);
            }

     },

     function () {
             $('#chromehoverpopup').animate({
                     opacity: '0',
                     bottom: '-159%'
             }, 300);

             });

Can anybody see what I'm doing wrong here?

You can't use the < operator on two string values and get a reliable result. You need to parse .css('bottom') to an integer, and compare it to an integer — Rory McCrossan
– Rory McCrossan, Commented Aug 5, 2016 at 7:48

Iceman · Accepted Answer · 2016-08-05 07:50:58Z

3

Strings need to be converted to Number before attempting numerical logical operators on them.

try

parseInt($("#inuithoverpopup").css("bottom")) < -130

Note that the value returned will be in pixels and not % as you expected, so adjust value of 130% accordingly.

answered Aug 5, 2016 at 7:50

Iceman

6,1652 gold badges25 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

If Else CSS Hovercode not working in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related