Heim >Web-Frontend >HTML-Tutorial >《实现选中高亮，在火狐上不兼容的问题，请高手指教》_html/css_WEB-ITnose
《实现选中高亮，在火狐上不兼容的问题，请高手指教》_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:521019Durchsuche
<!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> 回复讨论(解决方案)
FireFox中不支持event.fromElement、event.toElement
建议换为其他方式实现选中高亮
如下所示就可以实现选中高亮显示，IE和FireFox都兼容
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| test | test | test | test | test |
| test | test | test | test | test |
| test | test | test | test | test |
如下所示就可以实现选中高亮显示，IE和FireFox都兼容
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
FireFox中不支持event.fromElement、event.toElement
建议换为其他方式实现选中高亮
好的，问题已解决，谢谢啊。。。我一开始用css没成功，是有个小地方出了问题。
在标签中设置了背景色是不是css就不管用了？
引用 1 楼 conan8126 的回复:FireFox中不支持event.fromElement、event.toElement
建议换为其他方式实现选中高亮
好的，问题已解决，谢谢啊。。。我一开始用css没成功，是有个小地方出了问题。
在标签中设置了背景色是不是css就不管用了？
楼主请问是怎么解决的呢，谢谢，
我这JS 也是跟你的一样的问题，
http://bbs.csdn.net/topics/390331587?page=1#post-393335883
谢谢了啊，非常感谢。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：针对ie6的样式书写_html/css_WEB-ITnoseNächster Artikel：请问怎么写能实现当鼠标移到链接时，所属表格td的背景换成另一个图片 ?_html/css_WEB-ITnose