Làm thế nào để viết :hovervà :visitedđiều kiện cho a:before?
Tôi đang cố gắng a:before:hovernhưng nó không hoạt động
Làm thế nào để viết :hovervà :visitedđiều kiện cho a:before?
Tôi đang cố gắng a:before:hovernhưng nó không hoạt động
Câu trả lời:
Điều này phụ thuộc vào những gì bạn đang thực sự cố gắng làm.
Nếu bạn chỉ đơn giản muốn áp dụng các kiểu cho :beforephần tử giả khi aphần tử khớp với lớp giả, bạn cần phải viết a:hover:beforehoặc a:visited:beforethay vào đó. Lưu ý phần tử giả xuất hiện sau lớp giả (và trên thực tế, ở phần cuối của toàn bộ bộ chọn). Cũng lưu ý rằng chúng là hai thứ khác nhau; gọi cả hai "bộ chọn giả" sẽ làm bạn bối rối khi bạn gặp phải các vấn đề cú pháp như cái này.
Nếu bạn đang viết CSS3, bạn có thể biểu thị một phần tử giả bằng dấu hai chấm để làm cho sự khác biệt này rõ ràng hơn. Do đó, a:hover::beforevà a:visited::before. Nhưng nếu bạn đang phát triển cho các trình duyệt cũ như IE8 trở lên, thì bạn có thể thoát khỏi việc sử dụng các dấu hai chấm duy nhất.
Thứ tự cụ thể này của các lớp giả và các phần tử giả được nêu trong thông số kỹ thuật :
Một phần tử giả có thể được thêm vào chuỗi cuối cùng của các bộ chọn đơn giản trong bộ chọn.
Một chuỗi các bộ chọn đơn giản là một chuỗi các bộ chọn đơn giản không được phân tách bằng bộ kết hợp. Nó luôn bắt đầu với một bộ chọn loại hoặc bộ chọn phổ quát. Không có bộ chọn loại hoặc bộ chọn phổ quát nào được phép trong chuỗi.
Một selector đơn giản là một trong hai loại selector, chọn phổ quát, chọn thuộc tính, chọn lớp, chọn ID, hoặc pseudo-class.
Một lớp giả là một bộ chọn đơn giản. Tuy nhiên, một phần tử giả thì không, mặc dù nó giống với bộ chọn đơn giản.
Tuy nhiên, đối với người sử dụng hành động giả các lớp học như :hover1 , nếu bạn cần hiệu ứng này để áp dụng chỉ khi tương tác người dùng với pseudo-yếu tố bản thân nhưng không phải là ayếu tố, thì đây là không thể khác hơn là thông qua một số cách giải quyết bố trí phụ thuộc vào che khuất . Theo ngụ ý của văn bản, các phần tử giả CSS tiêu chuẩn hiện không thể có các lớp giả. Trong trường hợp đó, bạn sẽ cần áp dụng :hovercho một phần tử con thực tế thay vì phần tử giả.
1 Tất nhiên, điều này không áp dụng cho các lớp giả liên kết, chẳng hạn :visitednhư trong câu hỏi, vì các phần tử giả không liên kết.
text-decoration.
Viết a:hover::beforethay vì a::before:hover: ví dụ .
:aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::fter (đơn :có hỗ trợ tốt hơn)
Để thay đổi văn bản liên kết menu trên di chuột. (Văn bản ngôn ngữ khác nhau khi di chuột) ở đây là
html:
<a align="center" href="#"><span>kannada</span></a>css:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}a:hover::beforevới text-decoration: underline, làm cho phần gạch chân nhận màu đỏ của văn bản thay thế.
Câu trả lời của BoltClock là chính xác. Điều duy nhất tôi muốn nối thêm là nếu bạn muốn chỉ chọn phần tử giả, hãy đặt trong một khoảng.
Ví dụ:
<li><span data-icon='u'></span> List Element </li>thay vì:
<li> data-icon='u' List Element</li>Bằng cách này bạn có thể nói một cách đơn giản
ul [data-icon]:hover::before {color: #f7f7f7;}sẽ chỉ làm nổi bật phần tử giả, không phải toàn bộ phần tử li
Bạn cũng có thể giới hạn hành động của mình chỉ một lớp bằng cách sử dụng dấu ngoặc nhọn bên phải (">"), như tôi đã làm trong mã này:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>Lưu ý: Di chuột: trước khi chuyển đổi chỉ hoạt động trên lớp .test1