与jQuery .css（）函数和位置的问题：固定表

我试图让一个表悬停在页面的顶部，当您将鼠标悬停在其上时更改颜色。我用下面的CSS的DIV：与jQuery .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>

这里的JavaScript的：

$(document).ready(function() { 
    $('#edit').click(function() { 
     $('#editformdiv').slideToggle(); 
     $('#password').focus(); 
    }); 

    $("#navbar td").click(function() { 
     location.href = this.getAttribute("data-href"); 
    }); 

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

    $('#navbar td').mouseleave(function() { 
     $(this).css('background','#3399ff'); 
    }); 
});

这工作，并表被套牢在顶部这一页。但是，表格单元在悬停时不会改变颜色。我该如何解决这个问题，以便表格单元在盘旋时改变颜色？

编辑：这里是整个页面：

<!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>

这里是整个CSS表：

body { 
    margin: 0; 
    width: 100%; 
    font-family: "Verdana", sans-serif; 
    font-size: 14px; 
} 

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

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

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

.spacer { 
    opacity: 0; 
    height: 50px; 
} 

.text { 
    width: 65%; 
    padding: 5px; 
    border: 2px solid #3399ff; 
    border-radius: 5px; 
    margin: 10px auto; 
} 

div h2 { 
    font-size: 18px; 
    font-weight: normal; 
    text-align: center; 
} 

.text p:last-child { 
    color: gray; 
    text-align: center; 
}

来源

2013-05-07 DoctorSelar

呃... ...表？为你的菜单？ – 2013-05-07 17:10:28

尝试background-color，而不是只background

另外，我可以知道你为什么没有在你的CSS :hover把这个？会好起来的。

来源

2013-05-07 16:51:28

我尝试了这两个建议并没有发生任何事情。我改变了位置：固定在位置：相对和它的工作，但我希望导航栏坚持到屏幕的顶部。 – DoctorSelar 2013-05-08 16:02:26

嗯，我刚刚测试了你的代码和我的2个消解，所有这三种方法都起作用，所以你的问题不在这里......它在位置上相对工作的事实令人不安。我可以请你提供你的整个HTML（包括你的头部和身体）吗？ – 2013-05-08 17:20:46

我发布了整个代码，并在另一个浏览器中尝试过。 Internet Explorer 10似乎喜欢它，但不是谷歌浏览器。编辑：Firefox也不喜欢它。奇怪的是IE 10的作品，而不是Chrome或Firefox。 – DoctorSelar 2013-05-09 11:53:58

试试这个：

$("#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; 
}

来源

2013-05-07 16:51:11

为什么不使用'hover（）'？ – 2013-05-07 17:11:11

是的，这也可以用'悬停'来完成。 – 2013-05-07 17:12:27

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

来源

2013-05-07 16:52:31 Garrett

也许你可以尝试一些类似这样：

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

来源

2013-05-07 16:54:02

你的代码工作正常，检查是否有JS的错误，正在停止你的jQuery代码的工作。

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

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <title>TEST</title> 
    <style> 
     #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; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $('#edit').click(function() { 
       $('#editformdiv').slideToggle(); 
       $('#password').focus(); 
      }); 

      $("#navbar td").click(function() { 
       location.href = this.getAttribute("data-href"); 
      }); 

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

      $('#navbar td').mouseleave(function() { 
       $(this).css('background','#3399ff'); 
      }); 
     }); 
    </script> 
</head> 
<body> 

    <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> 

</body> 
</html>

来源

2013-05-07 16:58:15

与jQuery .css（）函数和位置的问题：固定表

回答

相关问题