Thông thường, các mũi tên đồ họa trên các trang web được sử dụng để tổ chức điều hướng. Khi bạn nhấp vào một con trỏ như vậy, bạn đi đến một trang khác hoặc đến một phần khác của trang hiện tại. Đôi khi một số hành động gắn liền với chúng - làm nổi bật nội dung của trường thẻ, khởi chạy tập lệnh JavaScript, v.v. Để nhấn mạnh rằng mũi tên này là một phần tử hoạt động, hãy sử dụng hiệu ứng "đánh dấu", tức là thay đổi về giao diện khi di chuột qua.
Cần thiết
Kiến thức cơ bản về ngôn ngữ HTML và CSS
Hướng dẫn
Bước 1
Xác định cơ chế để triển khai đánh dấu mũi tên phù hợp nhất với bạn. Có một số trong số chúng, hai đơn giản được đưa ra trong các bước tiếp theo của hướng dẫn này. Cả hai đều sử dụng lớp giả CSS hover. Khi con trỏ chuột ở trên phần tử đồ họa (mũi tên), kiểu được mô tả trong lớp giả này sẽ được áp dụng cho nó và phần còn lại của thời gian kiểu này không hoạt động. Đối với cả hai tùy chọn được mô tả bên dưới, bạn có thể sử dụng cùng một HTML mã, nhưng mô tả phong cách khác nhau. Mã mũi tên trong nguồn trang có thể được viết như sau: Thuộc tính id chỉ định mã định danh liên kết (arrowA), qua đó trình duyệt sẽ xác định mô tả kiểu nào nên được áp dụng cho nó.
Bước 2
Tùy chọn đầu tiên sẽ yêu cầu bạn chuẩn bị hai hình ảnh mũi tên - có và không có đèn nền. Lưu chúng vào các tệp có tên tương ứng như arrON.
a # arrowA, a # arrowA: đã thăm {
hiển thị: khối;
chiều cao: 30px;
chiều rộng: 100px;
background: url (arrOFF.gif) không lặp lại;
viền: 0;
}
a # arrowA: di chuột vào {
background: url (arrON.gif) không lặp lại;
viền: 0;
}
Khối đầu tiên chứa các kích thước của mũi tên (chiều cao: 30px; chiều rộng: 100px;) - thay thế chúng bằng các kích thước của hình ảnh mũi tên đã chuẩn bị.
Bước 3
Tùy chọn thứ hai cho phép bạn truy cập chỉ với một tệp hình ảnh. Bạn cần đặt cả hai hình ảnh của mũi tên vào đó - cả được đánh dấu và không hoạt động. Bạn có thể đặt chúng cạnh nhau, bạn có thể đặt chúng bên trên chiếc khác. Trong mã mẫu, chúng tôi sẽ giả định rằng mũi tên được đánh dấu được đặt dưới mũi tên không hoạt động và tệp được bạn đặt tên là arr.gif. Hình ảnh này, như trong phiên bản trước, được sử dụng làm nền cho liên kết. Vì các kích thước của đối tượng được chỉ ra trong mô tả kiểu, toàn bộ phần còn lại của nền (mũi tên được đánh dấu) không vừa với chúng sẽ không hiển thị cho người lướt web. Trong mô tả của di chuột kiểu giả, một sự thay đổi trong vị trí của hình nền được chỉ định, vì vậy khi bạn di con trỏ qua liên kết, một phần khác sẽ hiển thị và bây giờ mũi tên thụ động sẽ xuất hiện "ngoài màn hình".
a # arrowA, a # arrowA: đã thăm {
hiển thị: khối;
chiều rộng: 100px;
chiều cao: 30px;
background: url (arr.gif) không lặp lại;
viền: 0;
}
a # arrowA: di chuột vào {
background: url (arr.gif) không lặp lại 31px;
viền: 0;
}
Đừng quên thay đổi kích thước ở đây.
