Kiểu nội tuyến hoạt động như: di chuột trong CSS

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 phần lớn mục đích của CSS, nhưng đôi khi nó hữu ích cho các mục đích gỡ lỗi, như trong:

<p style="font-size: 24px">asdf</p>

Cú pháp để nhúng quy tắc như thế nào:

a:hover {text-decoration: underline;}

vào thuộc tính style của thẻ A? Rõ ràng không phải cái này ...

<a href="foo" style="text-decoration: underline">bar</a>

... vì điều đó sẽ áp dụng mọi lúc, trái ngược với chỉ khi di chuột.

Tôi e rằng không thể thực hiện được, các bộ chọn lớp giả không thể được đặt trong dòng, bạn sẽ phải thực hiện 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 thực hiện một bài kiểm tra nhanh với cái 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 trên IE7, IE8 beta 2, Firefox hoặc Chrome. Có ai khác có thể kiểm tra trong bất kỳ trình duyệt nào khác không?

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>

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>

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>

Tôi đã tổng hợp 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 khi di chuột qua mà không cần CSS bằng cách sử dụng các hành vi onmouseover và onmouseout.

http://jsfiddle.net/Lk9w1mkv/

<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>

Nếu <p>thẻ đó được tạo từ JavaScript, thì bạn có một tùy chọn khác: sử dụng JSS để chèn biểu định kiểu theo chương trình vào phần đầu tài liệu. Nó hỗ trợ '&:hover'. https://cssinjs.org/

Tôi không nghĩ rằng 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.

Hơn hết, bạn có thể xâu chuỗi các liên kết sự kiện 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 việc chỉnh sửa thủ công tất cả HTML để bật hoặc tắt chúng. Sau đó, một lần nữa, vì bạn có thể làm điều 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).