Thay đổi màu gạch dưới bằng css không hoạt động trong chrome?

Question

Tôi đang cố gắng thay đổi màu gạch dưới trong một sự kiện di chuột bằng cách sử dụng các nhịp và nó hoạt động trong IE9 và Firefox 13.01 nhưng nó không hoạt động trong Chrome (nó phải gạch chân bằng vàng).

#menu li:hover span.underline { text-decoration:underline; color: #FAA301; }

<ul id="menu"> <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li> </ul>

Đây là js.fiddle: http://jsfiddle.net/wuUpL/7/.

Tôi ban đầu có ý tưởng từ bài đăng này https://stackoverflow.com/a/1175402/1490248 nhưng điều đó cũng không hoạt động trong chrome.

Lưu ý: Tôi không muốn sử dụng đường viền để sửa lỗi này, tôi đã sử dụng đường viền làm biên giới

Có ai có thể giúp tôi ở đây không? Có một số loại chrome hack/exception tôi có thể sử dụng để sửa lỗi này?

Answer 1

Tôi biết bạn đã nói bạn không muốn sử dụng đường viền ở đây, nhưng bạn đã tìm thấy thứ gì đó không hoạt động giống nhau giữa hai trình duyệt.

Bạn có thể làm việc này trên Chrome bằng cách thêm khoảng cách bên trong và sử dụng đường viền trên đó.

http://jsfiddle.net/wuUpL/10/

Xin lỗi nếu nó không phải là những gì bạn có trong tâm trí, nhưng Gecko và WebKit không đồng ý về một cái gì đó ở đây!

Answer 2

Có thể đáng chú ý rằng thường là đặt màu văn bản gốc và con khác nhau để có được các công thức gạch dưới màu khác nhau ngay cả trong Chrome. Nhưng có một số lỗi lạ trong liên kết trang trí thừa kế trong Chrome:

u { 
 
    text-decoration: underline; 
 
    color: red; 
 
} 
 
u:hover { 
 
    text-decoration: overline; 
 
    color: green; 
 
} 
 
u * { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
u:hover * { 
 
    text-decoration: none; 
 
    color: gold; 
 
}

<p> 
 
    <u> 
 
    Parent with decoration. 
 
    <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span> 
 
    </u> 
 
</p> 
 
<p> 
 
<p> 
 
    <u> 
 
    Parent with decoration. 
 
    <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a> 
 
    </u> 
 
</p>

gì là lạ là cả hai yếu tố trong cùng có chính xác cùng một phong cách tính toán trong Chrome (theo Công cụ Dev) , do đó, có vẻ như không có gì để làm để khắc phục điều đó ngay bây giờ.

Trong tương lai, bạn sẽ có thể sử dụng phần tử đơn và text-decoration-color thuộc tính CSS.