與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（）函數和位置的問題：固定表

回答

相關問題