Javascript 函数和位置有问题：固定表_Javascript_Jquery_Html_Css

Javascript 函数和位置有问题：固定表

javascript jquery html css

Javascript 函数和位置有问题：固定表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图得到一张桌子，当你把鼠标悬停在上面时，它会在页面顶部改变颜色。我在div上使用以下CSS： #navbar { width: 100%; margin: 0; position: fixed; top: 0px; border-spacing: 0; } #navbar td { width: 20%; background: #3399ff; padding: 10px; text-align: center;

我试图得到一张桌子，当你把鼠标悬停在上面时，它会在页面顶部改变颜色。我在div上使用以下CSS：

#navbar {
    width: 100%;
    margin: 0;
    position: fixed;
    top: 0px;
    border-spacing: 0;
}

#navbar td {
    width: 20%;
    background: #3399ff;
    padding: 10px;
    text-align: center;
    font-size: 24px;
    font-family: "Verdana", sans-serif;
    font-variant: small-caps;
}

#navbar td:hover {
    cursor: pointer;
}

这是桌子本身：

<table id="navbar">
    <tr>
        <td data-href="/">
            <div>
                Home
            </div>
        </td>
        <td data-href="/tribes">
            <div>
                Tribes
            </div>
        </td>
        <td data-href="/minecraft">
            <div>
                Minecraft
            </div>
        </td>
        <td data-href="/dynmap">
            <div>
                Dynmap
            </div>
        </td>
        <td data-href="/links">
            <div>
                Links
            </div>
        </td>
    </tr>
</table>

这样就可以了，表格被粘在页面的顶部。但是，表格单元格悬停在上方时不会改变颜色。我如何解决这个问题，使表格单元格在悬停时改变颜色

编辑：以下是整个页面：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home</title>
        <script src="/jquery-1.9.1.min.js"></script>
        <script src="/scripts.js"></script>
        <link rel="stylesheet" type="text/css" href="/stylesheet.css">

        <style>
            #editcontainer {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                position: fixed;
                bottom: 0px;
                margin-bottom: 0;
            }

            #edit {
                padding: 4px;
                width: 100px;
                background-color: #3399ff;
                margin-bottom: 0;
                text-align: center;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                margin-left: auto;
                margin-right: auto;
            }

            #editformdiv {
                margin-top: 0;
                border: 2px solid #3399ff;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom: 0;
                margin-left: auto;
                margin-right: auto;
                display: none;
                width: 300px;
                background-color: white;
            }

            #editform {
                text-align: center;
            }

            #edit:hover {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <table id="navbar">
            <tr>
                <td data-href="/">
                    Home
                </td>
                <td data-href="/tribes">
                    Tribes
                </td>
                <td data-href="/minecraft">
                    Minecraft
                </td>
                <td data-href="/downloads">
                    Downloads
                </td>
                <td data-href="/links">
                    Links
                </td>
            </tr>
        </table>

        <div class="spacer"></div>


        <div class="spacer"></div>

        <div id="editcontainer">
            <div id="edit">EDIT</div>
            <div id="editformdiv">
                <table id="editform">
                    <form name="login" method="post" action="edit.php">
                    <tr>
                        <td><b>Login</b></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input name="password" type="password" id="password"></td>
                    </tr>
                    <tr>
                        <td><input type="submit" name="Submit" value="Login"></td>
                        <td></td>
                    </tr>
                    </form>
                </table>
            </div>  
        </div>
    </body>
</html>

试试这个：

$("#navbar td").mouseenter(function () {
    $(this).css('background-color', '#33ccff')
}).mouseleave(function () {
    $(this).css('background-color', '#3399ff');
});

您只需使用css即可完成此操作：

#navbar td {
    background-color: #3399ff;
}

#navbar td:hover {
    cursor: pointer;
    background-color: #33ccff;
}

试试这个：

$("#navbar td").mouseenter(function () {
    $(this).css('background-color', '#33ccff')
}).mouseleave(function () {
    $(this).css('background-color', '#3399ff');
});

您只需使用css即可完成此操作：

#navbar td {
    background-color: #3399ff;
}

#navbar td:hover {
    cursor: pointer;
    background-color: #33ccff;
}

尝试使用背景色，而不仅仅是背景色

另外，我可以知道为什么你不把这个放在CSS中吗？这样会更好。

尝试

背景色

而不是只

背景色

另外，我可以知道为什么你不把这个放在CSS中吗？这会更好。

在CSS中为：hover属性添加背景样式，而不是在jQuery中。

也许您可以尝试类似的方法：

$('navbar td').hover(function() {
  $(this).css('background-color','#33ccff')
}, function() {
  $(this).css('background-color', '#3399ff')
});

或者，如上所述，您可以执行类似于以下内容的CSS：

#navbar td {
    width: 20%;
    background: #3399ff;
    padding: 10px;
    text-align: center;
    font-size: 24px;
    font-family: "Verdana", sans-serif;
    font-variant: small-caps;
}

#navbar td:hover {
    cursor: pointer;
    background: #33ccff;
}

也许你可以尝试类似的方法：

$('navbar td').hover(function() {
  $(this).css('background-color','#33ccff')
}, function() {
  $(this).css('background-color', '#3399ff')
});

或者，如上所述，您可以执行类似于以下内容的CSS：

#navbar td {
    width: 20%;
    background: #3399ff;
    padding: 10px;
    text-align: center;
    font-size: 24px;
    font-family: "Verdana", sans-serif;
    font-variant: small-caps;
}

#navbar td:hover {
    cursor: pointer;
    background: #33ccff;
}

您的代码工作正常，请检查停止jQuery代码工作的js错误

工作示例（与您发布的代码完全相同）：


试验
#导航栏{
宽度：100%；
保证金：0；
位置：固定；
顶部：0px；
边界间距：0；
}
#导航条{
宽度：20%；
背景:#3399ff；
填充：10px；
文本对齐：居中；
字体大小：24px；
字体系列：“Verdana”，无衬线；
字体变体：小大写字母；
}
#导航栏td:悬停{
光标：指针；
}
$（文档）.ready（函数（）{
$（“#编辑”）。单击（函数（）{
$（'#editformdiv'）。slideToggle（）；
$（“#密码”）.focus（）；
});
$（“#导航栏td”）。单击（函数（）{
location.href=this.getAttribute（“数据href”）；
});
$（“#导航栏td”）.mouseenter（函数（）{
$（this.css（'background'，'#33ccff'））
});
$（'#navbar td'）.mouseleave（函数（）{
$（this.css（'background'，'#3399ff'）；
});
});
家
部落
我的世界
Dynmap
链接

您的代码工作正常，请检查导致jQuery代码无法工作的js错误

工作示例（与您发布的代码完全相同）：


试验
#导航栏{
宽度：100%；
保证金：0；
位置：固定；
顶部：0px；
边界间距：0；
}
#导航条{
宽度：20%；
背景:#3399ff；
填充：10px；
文本对齐：居中；
字体大小：24px；
字体系列：“Verdana”，无衬线；
字体变体：小大写字母；
}
#导航栏td:悬停{
光标：指针；
}
$（文档）.ready（函数（）{
$（“#编辑”）。单击（函数（）{
$（'#editformdiv'）。slideToggle（）；
$（“#密码”）.focus（）；
});
$（“#导航栏td”）。单击（函数（）{
location.href=this.getAttribute（“数据href”）；
});
$（“#导航栏td”）.mouseenter（函数（）{
$（this.css（'background'，'#33ccff'））
});
$（'#navbar td'）.mouseleave（函数（）{
$（this.css（'background'，'#3399ff'）；
});
});
家
部落
我的世界
Dynmap
链接

嗯。。。桌子要你的菜单吗？嗯。。。桌子为了你的菜单？我尝试了这两个建议，但什么都没发生。我把position:fixed改为position:relative，效果很好，但我希望导航栏能贴在屏幕顶部。我刚刚测试了你的代码和我的2个建议，这三种方法都有效，所以你的问题不在这里。。。它在相对位置工作的事实令人不安。我可以要求您发布整个HTML（包括头部和身体）吗？我发布了整个代码，并在另一个浏览器中进行了尝试。InternetExplorer10似乎喜欢它，但不喜欢谷歌Chrome。编辑：Firefox也不喜欢它。奇怪的是，IE 10可以正常工作，而不是Chrome或Firefox。你有一个间隔者在导航栏上徘徊。添加

z-index:1在导航栏上，它会工作。我尝试了这两个建议，但都没有发生任何事情。我把position:fixed改为position:relative，效果很好，但我希望导航栏能贴在屏幕顶部。我刚刚测试了你的代码和我的2个建议，这三种方法都有效，所以你的问题不在这里。。。它在相对位置工作的事实令人不安。我可以吗