Home >Web Front-end >HTML Tutorial >'Implementing selection highlighting, incompatible problem on Firefox, please give advice'_html/css_WEB-ITnose
'Implementing selection highlighting, incompatible problem on Firefox, please give advice'_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:521013browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>无标题文档</title><script>var highlightcolor='#eafcd5';//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(var clickcolor='#51b2f6';function changeto(event){ source=event.srcElement || event.target; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; //alert(source); source=source.parentElement; cs = source.children; //alert(cs); //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; }}function changeback(event){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; }}</script></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9" background="images/tab_12.gif"> </td> <td bgcolor="#f3ffe3"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98" onmouseover="changeto(event)" onmouseout="changeback(event)"> <tr> <td width="6%" height="26" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">选择</div></td> <td width="8%" height="18" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">序号</div></td> <td width="24%" height="18" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">运行机器ip地址</div></td> </tr> <tr> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" /> </div></td> <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">A0012</div></td> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">192.168.0.124</div></td> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">wtz_fh</div></td> </tr> <tr> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" /> </div></td> <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">A0012</div></td> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">192.168.0.124</div></td> <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">wtz_fh</div></td> </tr> </table></td> <td width="9" background="images/tab_16.gif"> </td> </tr> </table></td> </tr></table></body></html> Reply to discussion (solution)
FireFox does not support event.fromElement, event.toElement
It is recommended to use other methods to achieve selection highlighting
You can achieve selection highlighting as shown below, both IE and FireFox are compatible
232e094119c222669374de2e17012b7f
68ccb177a5de0ef9542dde7d35bae727
< ;head>
3f948aea8d30d48a692b90ea22425202
b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
.t_table
{
width: 100%;
}
.t_table TR
{
min- height: 26px;
background-color: #006496;
}
.t_table TR:hover
{
background-color: #eafcd5;
}
e90442d4aba9b6409c93259f982d1eec
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
b69434f451d2031b0b37eb169b74e8ff
td>
b6c5a531a458a2e790c1fd6421739d1ctest< ;/td>
t;
b6c5a531a458a2e790c1fd6421739d1c testb90dd5946f0946207856a8a37f441edf 🎜> 🎜> td>
b6c5a531a458a2e790c1fd6421739d1ctest< ;/td>
>
You can achieve selection highlighting as shown below, both IE and FireFox are compatible
74420b74d0c2469781aa51079d59d11f
Quoting the reply from conan8126 on the 1st floor: event.fromElement and event.toElement are not supported in FireFox
It is recommended to use other methods to achieve selection highlighting
OK, the problem has been solved, thank you. . . I didn't succeed with css at first. There was a small problem.
If I set the background color in the tag, will the css not work?
Could you please tell me how you solved it, thank you.
My JS problem is the same as yours.
http://bbs.csdn.net/topics /390331587?page=1#post-393335883
Thank you, thank you very much.