CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bonfire Dog
Bonfire Dog

Reputation: 167

If Else CSS Hovercode not working in jQuery

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?

Upvotes: 1

Views: 56

Answers (1)

Iceman
Iceman

Reputation: 6145

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.

Upvotes: 3

Related Questions