javascript - 如果 Else CSS Hovercode 在 jQuery 中不起作用

Question

我的网页底部有六个按钮，每个按钮都有一个隐藏的“弹出”div，当您将鼠标悬停在按钮上时，它会上升和淡入。此功能有效，但由于按钮靠得很近，因此当您将鼠标悬停从一个按钮快速切换到另一个按钮时，通常会出现两个按钮重叠的情况。

我已经尝试构建一些 jQuery 代码，以仅在所有其他弹出窗口位于页面底部下方时才允许 css 的“上升和淡入”更改发生。这将允许在当前悬停的按钮弹出其弹出窗口之前重置所有弹出窗口。

不幸的是，代码无法正常工作。 没有弹出窗口现在在悬停时更改它们的 css。

这是一个特定按钮的代码。

$('#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);

             });

谁能看出我在这里做错了什么？

Answer 1

在尝试对其进行数字逻辑运算符之前，需要将字符串转换为 Number。

尝试

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

请注意，返回的值将以像素为单位，而不是您预期的 %，因此相应地调整 130% 的值。