Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Kolor linka po najechaniu
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Joachim Peters
29.06.2006, 18:54:55
Mam zrobioną kolumne, której css wygląda tak:
[HTML] pobierz, plaintext 
  1. td.menu_links {
  2. color: #818181;
  3. padding: 5px;
  4. background-color: #fbfbfb;
  5. border-bottom: 1px #e9e9e9 solid;
  6. font-size: 11px;
  7. }
[HTML] pobierz, plaintext

kolumna po najechaniu przyjmuje te wartości:
[HTML] pobierz, plaintext 
  1. td.menu_links:hover {
  2. color: black;
  3. padding: 5px;
  4. background-color: #f3f3f3;
  5. border-bottom: 1px #e9e9e9 solid;
  6. font-size: 11px;
  7. }
[HTML] pobierz, plaintext


tylko jak zrobić, żeby po najechaniu na kolumne (nie na link) kolor linku też się zmieniał?
piotrd
29.06.2006, 19:12:41
sam css tu nie pomoże, potrzebny będzie jeszcze skrypcik js (mialem kiedys cos podobnego wiec jak znajde do go umieszcze tutaj).
revyag
29.06.2006, 21:31:30
Ale oczywiście wiesz że pod ie nie zadziala zmiana koloru komórki. Albo js albo http://www.xs4all.nl/~peterned/csshover.html
Co do koloru linków:
Kod
<script type="text/javascript">
function col(cond) {
    
    var a = document.getElementsByTagName("a");
    var count = a.length;
    
    for(i = 0; i < count; i++) {
        if(a[i].parentNode.nodeName == 'TD' && a[i].parentNode.className=='menu_links') {
            if(cond) {
                a[i].style.color='#ff0000';
            } else {
                a[i].style.color='#0000ff';
            }
        }
    }
}
</script>

[HTML] pobierz, plaintext 
  1. <table>
  2.     <tr>
  3.         <td class="menu_links" onmouseover="col(true)" onmouseout="col(false)"><a href="">link</a></td>
  4.     </tr>
  5. </table>
[HTML] pobierz, plaintext

Zasada działania:
Wszystkie elementy typu a są pobierane do tablicy. Następnie przelatujemy tablicę i jeśli w hierarchii dom rodzicem węzła a jest td i jego klasa to menu_links, zmieniamy kolor linka.

cond - określa czy komórka tabeli jest "najechana" snitch.gif
siemakuba
29.06.2006, 22:00:43
ależ kombinacyjne :) pewnie żeby w IE działało?
skoro autor daje :hover dla TD, to chyba z góry olewa IE, a skoro tak, to po co kombinować z JS?

Pytanie: jak zrobić aby kiedy TD jest w stanie "hover" zmienić kolor linka zawartego w tym TD?
Odpowiedź:
Kod
TD:hover A { color:red; }

pozdr.
kwiateusz
29.06.2006, 23:47:22
zamiast hover w td mozna zawsze uzyc w js onmouseover i podmienic tlo... wtedy dziala i w IE ...
babejsza
29.06.2006, 23:52:00
a swiją drogą nie:

Kod
border-bottom: 1px #e9e9e9 solid;


tylko:

Kod
border-bottom: 1px solid #e9e9e9;
.

Olewanie IE to duży błąd. Chyba, że strona ma się w ogóle nie wyświetlać w tej przeglądarce, tylko pokazywać komunikat o nieprzystosowaniu.
ens0re
30.06.2006, 09:20:03
@babejsza, wytlumacz mi jaka jest różnica? laugh.gif
@kwiateusz, a jak ktoś wyłączy obsługe JS? Nie zadziała nigdzie smile.gif
tiraeth
30.06.2006, 09:28:17
Tak... po co robić stronę pod IE ? smile.gif A potem na Osiołkach wylądować smile.gif

@ens0re: Należy budować strony zgodnie ze specyfikacją i standardami CSS smile.gif
ens0re
30.06.2006, 09:33:27
Hm? A co ja takiego napisałem, żebyś wyciągnął takie wnioski? Nie napisałem, że rozwiązanie siemakuba jest dobre. Tylko napisałem to co wyżej napisałem smile.gif
revyag
30.06.2006, 09:54:39
Chodzi o kolejność wartości atrybutów border.
http://www.w3.org/TR/CSS21/box.html#border...hand-properties

Ale nie wiem czy ma to znacznie, validator i tak sobie sam to ustawi w odpowiedniej kolejności.
Prph
2.07.2006, 08:46:36
Jest inna metoda, bardzo dobrze dzialajaca. Uzywasz do menu <ul></ul> i linki osadzasz w <li></li>.

W sklepie http://sklep.vgm.pl/ menu jest wlasnie tak rozwiazane. CSS:

[HTML] pobierz, plaintext 
  1. #menuCategories ul
  2. {
  3.   list-style: none;
  4.   padding: 0px;
  5.   margin: 0px;
  6. }
  7.  
  8. #menuCategories li
  9. {
  10.   display: inline;
  11. }
  12.  
  13. // Tu definiujesz wyglad bloczku - odstepy no i ogolny wyglad linkow
  14.  
  15. #menuCategories li a
  16. {
  17.   display: block;
  18.   padding: 2px 0 2px 1.2em;
  19.   text-decoration: none;
  20.   line-height: 12px;
  21.   border: 0;
  22.   font-size: 11px;
  23.   border-bottom: 1px solid #d8e7f9;
  24. }
  25.  
  26. // Pozostalo jedynie ustawic co ma sie dziac z linkami po najechaniu, odwiedzeniu itp...
  27.  
  28. #menuCategories li a:link, #menuCategories li a:visited
  29. {
  30.   color: #003b61;
  31. }
  32.  
  33. #menuCategories li a:hover, #menuCategories li a:active
  34. {
  35.   color: #ffffff;
  36.   background: #ffa800;
  37. }
[HTML] pobierz, plaintext


Sprawdza sie to zawsze winksmiley.jpg Oczywiscie mozna zmianic li tak aby linki byly wyswietlane w linii, nie w kolumnie.

[HTML] pobierz, plaintext 
  1. <div id="menuCategories">
  2. <ul>
  3.   <li><a href="">Artykuły Biurowe</a></li>
  4. </ul>
  5. </div>
[HTML] pobierz, plaintext


Pozdrawiam, Adrian.
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.