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

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

html css

Html 如何突出显示具有相同值的独立表格单元格,html,css,html-table,hover,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; }

我有两张独立的桌子。当我将鼠标移到表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:hover td.highlight776{背景色：红色；}
tr:hover td.highlight970{背景色：蓝色；}
tr:hover td.highlight1024{背景色：洋红色；}
tr:hover td.highlight1197{背景色：黄色；}
tr:hover td.highlight1200{背景色：橙色；}
tr:hover td.highlight1015{背景色：橙色；}



表1
项目776
项目1015
Proje 970
项目1024
项目1197
Proje 1200




表2
776
1015
776
970
1024
970
970
776
776
776
1015
1015

您将需要使用javascript。可能重复

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

</BODY>
</HTML>