Applying CSS style to table cell when hovered over

Question

I have a table that has a class, and some td elements inside of it. What is the correct CSS to give a hover effect on tds which are part of a table with some particular class?

<table class='some_class'>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
</table>

What's the right CSS? This is not working:

> .some_class td:hover { some style }

Bootstrap can do this like : hi source: http://stackoverflow.com/a/34243399/7791423 — Amado Saladino, Apr 17 '17 at 09:44

Michael · Accepted Answer · 2011-08-28T10:03:21.180

4

put this in your css file

body {
background-color: #ccc;
}

table.some_style td {
background-color: #0f0;
}

table.some_style td:hover {
background-color: #06c;
}

and this as your table

<table class="some_style">
<thead>
    <tr>
        <th>column one</th>
                    <th>column two</th>
                                <th>column three</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>data one</td>
                    <td>data two</td>
                                <td>data three</td>
    </tr>
</tbody>

edited Aug 28 '11 at 10:03

answered Aug 28 '11 at 09:57

Michael

4,282
9
55
89

@David, I've updated the code above. Let me know if that helps. – Michael Aug 28 '11 at 10:03
Can you post your code here so I can take a look. Here is my full code, try this http://pastebin.com/hY9GGJKG – Michael Aug 28 '11 at 10:05
There were my mistakes in first try. your code works perfectly! Thanks! – David Aug 28 '11 at 10:11

score 0 · Answer 2 · answered Aug 28 '11 at 10:22

This is working for me table td:hover{ background : red; }

<table class='some_class'>
<tr>   
<td>123</td>
<td>321</td>
</tr>
</table>

I think your code should work also, maybe you didn't include css correctly , which browser do you use ???

Applying CSS style to table cell when hovered over

2 Answers2