Eu criei uma tabela bem simples em HTML com 4 linhas e 4 colunas e usei o Pure CSS para deixar ela mais bonita.
Depois, eu queria que a linha da tabela ficasse em destaque quando o usuário passasse o mouse sobre essa linha. Bastou eu adicionar o código abaixo na tag <head>
:
<style>
tr:hover {background-color: #ffff99;}
</style>
O problema é que apenas as linhas em branco da tabela estão sendo destacadas. As linhas que estavam cinza, por causa do Pure CSS, permanecem cinza.
Alguém teria alguma sugestão de como eu altero o código para que as linhas fiquem destacadas quando eu passar o mouse em cima, tanto as linhas em branco como as linhas cinzas?
Segue o código completo:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
tr:hover {background-color: #ffff99;}
</style>
<title>Table</title>
</head>
<body>
<h1>Table</h1>
<table class="pure-table pure-table-striped">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>
</body>
</html>
tr:hover { background-color: #ffff99 !important; }
?