CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 4508

Applying CSS style to table cell when hovered over

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 }

Upvotes: 2

Views: 16421

Answers (2)

Mina Kolta
Mina Kolta

Reputation: 1551

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

Upvotes: 0

Michael
Michael

Reputation: 4390

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>

Upvotes: 4

Related Questions