< eelmine | Peatüki sisukord |
8.1 CSS-i kursorid
CSS pakub palju põnevaid võimalusi. Näitkes veebilehel on võimalik muuta ka kasutaja kursori välimust. Selleks on CSS-is kasutusel parameeter cursor
. Kursori väljanägemist saab muuta erinevate elementide peal eraldi.
%blue%/*Kursori stiili muutmine*/%% elemendi_nimetus{cursor: väärtus;}
Erinevad kursori väärtused on toodud allpool:
Pea meeles, et erinevad veebilehitsejad võivad ühte ja samat väärtust kuvada teistest veebilehitsejatest erinevalt. Mõnikord võib juhtuda ka nii, et veebilehitseja ei toeta teatud kursori väärtust ning ei oska seda kuvada. Sellisel juhul kaob see efekt ära ning stiil on asendatud tavapärasega.
Iseseisev ülesanne:
Võtke järgnev kood ning tehke nii, et kui liigutada kursor tabeli detailide peale(päis ei kuulu tabeli detailide hulka), siis kursori välimus muutub.
<!DOCTYPE html> <html> <head> <title>Erinevad kursorid</title> <style> td, th { border: 1px black solid;} table { border-collapse: collapse;} th {background: orange;} td {background: aqua;} td:hover {background-color: #f5f5f5} </style> </head> <body> <table style="width:30%"> <tr> <th>Eesnimi</th> <th>Perekonnanimi</th> <th>Punktid</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Toe</td> <td>60</td> </tr> </table> </body> </html>
< eelmine | Peatüki sisukord |