2011-08-13 38 views
9

Tôi có ấn tượng rằng việc thay đổi một thẻ neo trên di chuột có thể được thực hiện như thế này:Inline CSS cho thẻ neo và di chuột

a:hover {background: #FFDD00;} 
a:hover {color: #AAAAAA;} 

Đúng tôi nếu tôi sai.

Bây giờ, vì một số lý do phức tạp, tôi không thể đặt mã đó trong một biểu định kiểu, tôi phải đặt nó trong HTML thực tế. Tôi sẽ làm như thế nào?

<a href="..." style="___???___">...</a> 
+0

bản sao có thể có của [Cách viết: di chuột trong CSS nội tuyến?] (Http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) – user

Trả lời

9

Không có cách nào để làm điều đó.

CSS nội tuyến không thể chạm vào các lớp giả như :hover.

Tôi đoán lý do bạn muốn làm điều này là vì bạn chỉ có thể chỉnh sửa <body> của HTML (vì bất kỳ lý do gì). Những gì bạn có thể làm là thêm một yếu tố style:

<style> 
a:hover { 
    background: #FFDD00; 
    color: #AAAAAA; 
} 
<style> 

<a href="#">...</a> 

Có một yếu tố style ngoài <head> không phải là HTML hợp lệ, nhưng (điều quan trọng) nó làm việc trong tất cả các trình duyệt.

+1

Tôi cần điều này để thiết lập phong cách di chuột cho các liên kết bên trong một e-mail ... gmail không may loại bỏ các thẻ kiểu, cũng như các tham chiếu kiểu bên ngoài, và các javascripts ... vì vậy không có hy vọng? –

1

Tôi khá chắc chắn bạn không thể áp dụng nội tuyến lớp học psudo, nhưng bạn có thể làm điều này với nội tuyến javascript.

ví dụ:

<a href="..." onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'black'">...</a> 
6

Nếu bạn không thể quăng CSS di chuột vào thẻ, thì cách tốt nhất để xử lý việc này sẽ là JavaScript. Tôi thường không gọi đây là một cách tiếp cận tốt, nhưng có vẻ như đôi tay của bạn bị trói ở đây.

<a href="..." 
    onmouseover="this.style.backgroundColor='#ffdd00';this.style.color='#aaaaaa'" 
    onmouseout="this.style.backgroundColor='transparent';this.style.color='inherit'"> 
... 
</a> 

Hy vọng điều đó phù hợp với bạn!

3

Bạn có thể đặt cả hai kiểu trong cùng một khối, như thế này.

a:hover { 
    background: #FFDD00; 
    color: #AAAAAA; 
} 

Và nếu bạn không thể sử dụng một kiểu dáng bên ngoài, bạn có thể thêm một khối phong cách cho người đứng đầu của trang của bạn ...

... 
    <style> 
     a:hover { 
      background: #FFDD00; 
      color: #AAAAAA; 
     } 
    </style> 
</head> 
... 
4

mặt hàng này trong một diễn đàn cũ và có vẻ như công việc tuyệt vời :)

<a href="###" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">###</a> 
0

nó sẽ tốt hơn nếu làm theo những gợi ý đưa ra ở trên trong một style sheet bên ngoài, nhưng vì lý do gì bạn thực sự cần phải làm điều đó, hãy thử này:

a href = "" style = "text-decoration: gạch chân; màu: xanh;"

Các vấn đề liên quan