Tôi biết rằng việc nhúng các kiểu CSS trực tiếp vào các thẻ HTML mà chúng ảnh hưởng đến việc đánh bại phần lớn mục đích của CSS, nhưng đôi khi nó hữu ích cho mục đích gỡ lỗi, như trong:
<p style="font-size: 24px">asdf</p>Cú pháp để nhúng một quy tắc như:
a:hover {text-decoration: underline;}vào thuộc tính style của thẻ A? Rõ ràng không phải ...
<a href="foo" style="text-decoration: underline">bar</a>... vì điều đó sẽ được áp dụng mọi lúc, trái ngược với chỉ trong khi di chuột.
Tôi e rằng điều đó không thể thực hiện được, các bộ chọn lớp giả không thể được đặt thẳng hàng, bạn sẽ phải làm điều đó trên trang hoặc trên biểu định kiểu.
Tôi nên đề cập rằng về mặt kỹ thuật bạn sẽ có thể làm điều đó theo thông số CSS , nhưng hầu hết các trình duyệt không hỗ trợ nó
Chỉnh sửa: Tôi vừa làm một bài kiểm tra nhanh với điều này:
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>Và nó không hoạt động trong IE7, IE8 beta 2, Firefox hoặc Chrome. Bất cứ ai khác có thể kiểm tra trong bất kỳ trình duyệt khác?
Nếu bạn chỉ gỡ lỗi, bạn có thể sử dụng javascript để sửa đổi css:
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>Nếu đó là để gỡ lỗi, chỉ cần thêm một lớp css để di chuột (vì các phần tử có thể có nhiều hơn một lớp):
a.hovertest:hover
{
text-decoration:underline;
}
<a href="http://example.com" class="foo bar hovertest">blah</a>Một giải pháp đơn giản:
<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>Hoặc là
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>Tôi đưa ra một giải pháp nhanh chóng cho bất kỳ ai muốn tạo cửa sổ bật lên di chuột mà không cần CSS bằng cách sử dụng các hành vi onmouseover và onmouseout.
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>Tôi không nghĩ jQuery cũng hỗ trợ các bộ chọn giả, nhưng nó cung cấp một cách nhanh chóng để thêm các sự kiện vào một, nhiều hoặc tất cả các điều khiển và thẻ tương tự của bạn trên một trang.
Tuyệt vời nhất, bạn có thể xâu chuỗi các sự kiện liên kết và thực hiện tất cả trong một dòng kịch bản nếu bạn muốn. Dễ dàng hơn nhiều so với chỉnh sửa thủ công tất cả các HTML để bật hoặc tắt chúng. Sau đó, một lần nữa, vì bạn có thể làm tương tự trong CSS, tôi không biết rằng nó mua cho bạn bất cứ thứ gì (ngoài việc học jQuery).
