Tại sao CSS không hoạt động trên các hàng trong bảng khi các ô bên trong các hàng có tên lớp?

Tôi đang mắc kẹt với vấn đề này vì vậy bất kỳ trợ giúp sẽ được đánh giá cao. Tôi có một bảng với nhiều hàng. Mỗi ô trong hàng thuộc về một lớp nhất định. Tôi sử dụng các tên lớp này để tô màu các ô.Tại sao CSS không hoạt động trên các hàng trong bảng khi các ô bên trong các hàng có tên lớp?

Dưới đây là một ví dụ dòng từ bảng của tôi:

<tr> 
    <td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td> 
    <td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td> 
    <td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td> 
</tr>

Tôi muốn làm nổi bật mỗi hàng khi người dùng di chuyển con trỏ chuột lên bất kỳ tế bào trong hàng đó. Vì vậy, tôi đã sử dụng mã CSS sau để đạt được điều đó.

tr:hover { 
    background-color: #FFFAF0; color: #000; 
}

không may có vẻ như vì mỗi ô dữ liệu bảng có tên lớp, di chuột không hoạt động. Nhưng nếu tôi xóa tên lớp khỏi các ô dữ liệu, thì công cụ di chuột sẽ hoạt động.

Câu hỏi của tôi là có cách nào tôi có thể nhận được điều di chuột làm việc cho hàng trong bảng, trong khi vẫn có tên lớp cho các ô dữ liệu bảng bên trong hàng.

Nguồn

2010-02-12 Vicer

lý do cộng đồng wiki ?? –

Hãy thử điều này:

tr:hover td { 
    background-color: #FFFAF0; color: #000; 
}

Nơi này sau khi td tờ khai theo phong cách hiện để được an toàn

Nguồn

2010-02-12 00:48:08

bạn đời, bạn hoàn toàn đóng đinh nó! Cảm ơn. khi tôi lần đầu tiên nhìn vào nó tôi nghĩ rằng giải pháp của bạn sẽ áp dụng trở lại. chỉ màu cho ô dữ liệu mà con trỏ chuột trỏ vào và không phải toàn bộ hàng (đó là thứ tôi muốn). Nhưng rõ ràng đó không phải là trường hợp. Có một số hàng như tiêu đề mà tôi không muốn được đánh dấu để tôi đơn giản định nghĩa một lớp khác dưới mã ur và đặt: --- tr.summarypage-section-title: hover td { \t background-color: deepskyblue; màu: # 000; } --- – Vicer

@Nick Craver nó hoạt động, nhưng bạn có thể giải thích tại sao tr: hover không hoạt động? – Bear

@Bear vì mã html ở trên cần phải được lồng trong các thẻ

. Khi bạn lồng chúng vào thẻ bảng, CSS cho tr: hover sau đó hoạt động ít nhất trên Chrome và FF với thuộc tính class được định nghĩa. – DataHerder

This does not happen for me. Đảm bảo rằng bạn chỉ thêm/xóa tên lớp khi kiểm tra xem chúng có tác động hay không và đảm bảo rằng td không có nền của riêng chúng che phủ của tr.

Nguồn

2010-02-12 00:45:38 Matchu

hi Matchu, bạn đã đặt tên lớp cho các ô nhưng bạn không sử dụng những tên đó để định dạng ô. hãy thử thêm hai dòng sau vào phần 'kiểu' của bạn và xem điều gì sẽ xảy ra. - td.one {background-color: red} td.hai {background-color: blue} - Đây là sự cố mà tôi đang gặp phải. – Vicer

Đúng vậy. Các thẻ 'td' nằm ở trên cùng, do đó màu nền của chúng được ưu tiên. Làm thế nào về việc có 'tr: hover td' làm phong cách của bạn? – Matchu

Bạn có thể cần phải sử dụng định danh quan trọng để đảm bảo rằng phong cách di chuột của bạn đè int nền được xác định! anh ta lớp học:

tr:hover { 
    background-color: #FFFFAF0 !important; 
    color: #000 !important; 
}

Điều thú vị là điều này sẽ không hoạt động đối với IE6 vì trình duyệt đó chỉ áp dụng di chuột vào thẻ.

Nguồn

2010-02-12 00:49:59

Hướng dẫn CSS trong tên lớp được ưu tiên hơn các hướng dẫn <tr>.

Để khắc phục điều này, hãy sử dụng td.summarypage-odd-column: hover, td.summarypage-even-column: di chuột bên trong CSS của bạn.

Lưu ý: Nếu bạn đang sử dụng IE6, di chuột chỉ hoạt động trên các liên kết, tức là: di chuột.

Nguồn

2010-02-12 03:43:47 Sarhanis

cảm ơn nhưng 'td.summarypage-odd-column: hover' chỉ làm nổi bật mỗi ô dữ liệu dsnt nó? Tôi muốn toàn bộ hàng được đánh dấu. Câu trả lời của Nick 'tr: hover td' là cách để đi. nhưng nếu bạn muốn điều trị một tập hợp các ô trong hàng khác nhau, bạn có thể sử dụng smthin tương tự như gợi ý. Ví dụ: không đánh dấu ô trống: -> tr: hover td.empty-cells {... bảng bk color here ...} <- sẽ thực hiện. – Vicer

Tôi nghĩ rằng màu nền td sẽ ghi đè màu nền. Giải pháp do @Nick Craver đưa ra là giải pháp tốt nhất.
Bạn phải thay đổi màu nền của ô chứ không phải màu nền của hàng.

tr:hover td { 
    ... 
}

Nguồn

2014-02-09 11:27:34

không bao giờ đặt dấu cách giữa

tr:hover(space)td

tôi đã đưa ra không gian vì thế nó đã làm việc cho tôi.

Nguồn

2014-02-17 22:10:08

Vui lòng cải thiện câu trả lời của bạn. –

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

Tại sao CSS không hoạt động trên các hàng trong bảng khi các ô bên trong các hàng có tên lớp?

Trả lời

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