如何突出显示具有相同值的独立表格单元格

时间:2017-04-25 08:42:02

标签: html css html-table hover

我有两张独立的桌子。当我将鼠标悬停在表1中的一个单元格上时,如何管理表2中具有相同值的单元格是否突出显示?我更喜欢使用html / css编码,而不是JQuery?

我在下面的代码上工作但没有成功。

<HTML>
<STYLE type=text/css>            
tr:hover td.highlight776{ background-color:red; }
tr:hover td.highlight970{ background-color:blue; }
tr:hover td.highlight1024{ background-color:magenta; }
tr:hover td.highlight1197{ background-color:yellow; }
tr:hover td.highlight1200{ background-color:orange; }
tr:hover td.highlight1015{ background-color:orange; }
</STYLE>

<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="CuteHTML">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">

<br><br>

Table 1
<Table border=1>

<tr>
<td class="highlight776">Proje 776</td>
</tr>
<tr>
<td class="highlight1015">Proje 1015</td>
</tr>
<tr>
<td class="highlight970">Proje 970</td>
</tr>
<tr>
<td class="highlight1024">Proje 1024</td>
</tr>
<tr>
<td class="highlight1197">Proje 1197</td>
<tr>
<td class="highlight1200">Proje 1200</td>
</tr>
</Table>

<br><br><br>

Table 2
<Table class="tahsis" border=1>
<tr>
 <td class="highlight776">776</td>
 <td class="highlight1015">1015</td>
 <td class="highlight776">776</td>
 <td class="highlight970">970</td>
 <td class="highlight1024">1024</td>
 <td class="highlight970">970</td>
</tr>

<tr>
 <td>970</td>
 <td>776</td>
 <td>776</td>
 <td>776</td>
 <td>1015</td>
 <td>1015</td>

<tr>
 <td>1015</td>
 <td>776</td>
 <td>970</td>
 <td>970</td>
 <td>1024</td>
 <td>970</td>
</tr>
</Table>

</BODY>
</HTML>

0 个答案:

没有答案