Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Nie działająca pseudoklasa :hover
Forum PHP.pl > Forum > Przedszkole
Maxie
15.02.2013, 22:58:18
Witam. Otóż w pisaniu stroń internetowych siedzę dość długo. Lecz nigdy nie spotkałem się z tak banalnym, a jednocześnie nieznośnym problemem.
Problem polega na pseudoklasie :hover. Powszechnie stosowana, bardzo umila przeglądanie i interakcję ze stroną, lecz u mnie coś się "zepsuło". Otóż zacząłem pisać nową stronę, stworzyłem parę linków i miejsce do logowania. Nic wielkiego. Ale nie wiem z jakiego powodu wcześniej wspomniany :hover działa tylko na hiperłączu posiadającym właściwość href. Strona wygląda tak:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <link href="style.css" rel="stylesheet" type="text/css">
  4. </head>
  5.  
  6. <div id="menu">
  7. <img id="logo" src="images/logo.png">
  8.  
  9. <div class="user_panel">
  10.  
  11. <form action="login.php">
  12. <table border=0 width="100%">
  13.   <tbody>
  14.     <tr>
  15.       <td width="30%">Login:</td>
  16.       <td><input type="text" id="login"></td>
  17.     </tr>
  18.     <tr>
  19.       <td>Hasło:</td>
  20.       <td><input type="password" id="pass"></td>
  21.     </tr>
  22.     <tr>
  23.       <td></td>
  24.       <td><button>Login</button></td>
  25.     </tr>
  26.   </tbody>
  27. </table>
  28. </form>
  29.  
  30.  
  31.  
  32. </div>
  33.  
  34. <div id="list">
  35. <a href="java script:void(0)">jeden</a>
  36. <a>dwa</a>
  37. </div>
  38. </div>
  39. <div id="content">
  40.  
  41. </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. font-family: tahoma;
  5. color: #444444;
  6. }
  7. #menu {
  8. width: 300px;
  9. height: 100%;
  10. float: left;
  11. border-right: solid 1px #DDDDDD;
  12. }
  13. #menu #logo{
  14. width: 300px;
  15. height: 150px;
  16. }
  17. #menu #list a{
  18. display: block;
  19. border: 1px solid #DDDDDD;
  20. margin: 5px;
  21. padding: 5px;
  22. background-color: #EFEFEF;
  23. text-decoration: none;
  24. }
  25. #menu #list a:hover {
  26. background-color: #ffffff;
  27. }
  28. #menu #list a.active {
  29. background-color: #ffffff;
  30. }
  31. #menu #list a.folder{
  32. background-color: #E6E6E6;
  33. }
  34. #menu .user_panel input[type="text"] , #menu .user_panel input[type="password"] {
  35. display: block;
  36. border: 1px solid #DDDDDD;
  37. padding: 5px;
  38. background-color: #ffffff;
  39. width: 100%;
  40. }
  41. #menu .user_panel button{
  42. display: block;
  43. border: 1px solid #DDDDDD;
  44. padding: 5px;
  45. background-color: #ffffff;
  46. width: 100%;
  47. }
  48. #menu .user_panel button:hover{
  49. background-color: #E6E6E6;
  50. }
[CSS] pobierz, plaintext

:hover nie działa w button i a bez href. W a z href :hover działa.
Co robię nie tak? Z góry dziękuję za odpowiedź!
gr56
15.02.2013, 23:43:23
Tag a bez atrybutu href może zachowywać się dziwnie. Najlepiej po prostu dodaj ten atrybut albo użyj innego elementu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.