go to content | go to menu | przejdź do menu języków

Efekt hover dla <td> w <table> używając <a>, display: block

Data:
11 czerwiec 2007
Kategoria:
CSS, HTML i XHTML, Programowanie
Author:
Cezary Tomczyk

Spis treści

  1. Element anchor a w td
  2. Zastosowanie javascript-u

Stworzenie efektu typu hover, głównie dla IE≤6, dla td w tabeli może być rozwiązane na kilka sposobów. Najprostszym sposobem na to jest po prostu użycie CSS-a:

  1. td:hover{
  2. background-color:green;
  3. }

O ile w większości przeglądarek efekt ten działa, o tyle w IE≤6 :hover nie działa bezpośrednio przy użyciu samego CSS-a. Funkcjonuje tylko dla <a>...</a>. Niemniej jednak można zastosować co najmniej dwa sposoby dla IE5.x i 6:

Element anchor a w td

Jednym ze sposobów jest zastosowanie elementu anchor <a>...</a> w <td>...</td> i nadanie mu właściwości display:block;. O ile sam efekt jest działający, o tyle od strony semantycznej struktura jest niepoprawna, bo przecież w <td>...</td> jest po prostu link, za pomocą którego oszukujemy, w pewnym sensie, tylko od strony wizualnej. Nie wymaga jednak stosowania javascript-u. Zobacz przykład jak to działa.

Zastosowanie javascript-u

Znacznie jednak lepiej jest po prostu użyć niewielkiego skryptu htc dla IE, który umieszczamy w arkuszu stylów. W naszym przykładzie jest to zrobione bezpośrednio w kodzie html:

  1. <!--[if lt IE 7]>
  2. <style type="text/css">
  3. table tbody td { behavior:url(hover.htc); }
  4. </style>
  5. <![endif]-->

Rozwiązanie proste i nie naruszające semantyki kodu html. Drobną wadą tego jest to, że nie zadziała bez javascript-u. Zobacz przykład jak to działa.

Następny lub poprzedni wpis

Twój komentarz

(required)
(required)

Szukaj