Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Odnośniki
Forum PHP.pl > Forum > Przedszkole
ayo1001
29.03.2013, 17:52:54
Witam,

Jak można przerobić to:



na:


Monter08
29.03.2013, 18:02:54
a co tu się zmienia oprócz koloru czcionki?
Gość
29.03.2013, 18:23:35
Kod
a:hover {color:#fff;}
ayo1001
29.03.2013, 19:55:27
Zaznaczony element oraz "hover" ma być biały a reszta tekstu czarna.
Gość
29.03.2013, 19:59:44
Zaznaczonemu elementowi dodaj klasę np. .active i za pomocą CSS zmień kolor czcionki
Kod
.active, a:hover {color:#fff;}
ayo1001
29.03.2013, 20:11:07
Wszystkie czcionki są białe...
miras
29.03.2013, 20:20:12
a jeśli oczekujesz konkretniejszej odpowiedzi to musisz wrzucić kod.
Gość
29.03.2013, 20:33:37
Kod
.menu li:hover a,
.menu .active a {color:#fff;}
ayo1001
29.03.2013, 20:40:48
Dzięki, działa.
miras
29.03.2013, 20:43:00
tu masz tą czarną czcionkę dla reszty jeszcze:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. .menu ul {
  5. text-align: left;
  6. display: inline;
  7. margin: 0;
  8. padding: 15px 4px 17px 0;
  9. list-style: none;
  10. }
  11. .menu ul li {
  12. font: bold 12px/18px sans-serif;
  13. display: inline-block;
  14. margin-right: -4px;
  15. position: relative;
  16. padding: 15px 20px;
  17. background: #fff;
  18. cursor: pointer;
  19. -webkit-transition: all 0.2s;
  20. -moz-transition: all 0.2s;
  21. -ms-transition: all 0.2s;
  22. -o-transition: all 0.2s;
  23. transition: all 0.2s;
  24. }
  25. .menu ul li:hover {
  26. background: #555;
  27. }
  28.  
  29. .menu ul li.active {
  30. background: #555;
  31. }
  32. .menu ul li ul {
  33. padding: 0;
  34. position: absolute;
  35. top: 48px;
  36. left: 0;
  37. width: 150px;
  38. -webkit-box-shadow: none;
  39. -moz-box-shadow: none;
  40. box-shadow: none;
  41. display: none;
  42. opacity: 0;
  43. visibility: hidden;
  44. -webkit-transiton: opacity 0.2s;
  45. -moz-transition: opacity 0.2s;
  46. -ms-transition: opacity 0.2s;
  47. -o-transition: opacity 0.2s;
  48. -transition: opacity 0.2s;
  49. }
  50. .menu ul li ul li { 
  51. background: #555; 
  52. display: block; 
  53. text-shadow: 0 -1px 0 rgb(61, 61, 61);
  54. border-bottom: 1px solid #777;
  55. }
  56.  
  57. .menu li:hover a, 
  58. .menu .active a {color:#fff;}
  59. .c { color: #000; }
  60.  
  61. .menu ul li ul li:hover { background: #666; }
  62. .menu ul li:hover ul {
  63. display: block;
  64. opacity: 1;
  65. visibility: visible;
  66. }
  67. .menu a, a.menu { text-decoration: none; }
  68. </style>
  69. </head>
  70.  
  71.  
  72. <div class="menu">
  73. <ul>
  74. <li class="active">
  75. <a href="#">AAAA</a>
  76. <ul>
  77. <li><a href="#">AAAA</a></li>
  78. <li><a href="#">BBBB</a></li>
  79. <li><a href="#">CCCC</a></li>
  80. <li><a href="#">DDDD</a></li>
  81. </ul>
  82. </li>
  83. <li>
  84. <a href="#" class="c">BBBB</a>
  85. <ul>
  86. <li><a href="#">AAAA</a></li>
  87. <li><a href="#">BBBB</a></li>
  88. <li><a href="#">CCCC</a></li>
  89. <li><a href="#">DDDD</a></li>
  90. </ul>
  91. </li>
  92. <li>
  93. <a href="#" class="c">CCCC</a>
  94. <ul>
  95. <li><a href="#">AAAA</a></li>
  96. <li><a href="#">BBBB</a></li>
  97. </ul>
  98. </li>
  99. </div>
  100.  
  101. </html>
  102.  
[HTML] pobierz, plaintext
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.