悬停样式被html表格行中的选定样式覆盖答案

【问题标题】：Hover Style overridden by selected style in html table row悬停样式被html表格行中的选定样式覆盖
【发布时间】：2010-11-09 07:54:18
【问题描述】：

我有一个简单的 html 表，它有几行。实现如下

1) 我已经为该行的 mouseover 事件指定了样式，以便在鼠标移过它时将其突出显示。

2)每一行也有一个复选框。选中此项后，复选框所在的行也需要以不同的颜色显示。

问题是，一旦单击复选框后行背景发生变化，应用于该行的 onmoseover 事件的悬停样式将不再适用。

以下是代码；

<html>
<head></head>

<style type="text/css">
  tr { background: blue; }
  tr:hover { background:green; }
</style>

<script type="text/javascript">

function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {                   
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }                 
    }       
}

</script>

<body>

<table>
<tr><th>Name</th> <th>Age</th></tr>

<tr id="row1" bgcolor="#FFFFFF" onMouseOver="className='hover';">
<td><input type="checkbox" id="chk" onclick="javascript:Highlight('row1');"</td>

<td>25</td></tr>
<tr id="row2"><td>aaaaaa</td><td>25</td></tr>
<tr id="row3"><td>aaaaaa</td><td>25</td></tr>

</table>

</body>

</html>

如果您能给我一个解决方案，不胜感激。

【问题讨论】：

标签： javascript html dhtml

【解决方案1】：

它正在做你告诉它做的事情，就在这里：

if(document.getElementById('chk').checked)
{
    document.getElementById(row).style.background='Red';
}
else
{
    document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }
}

你是说，如果它被选中，那么它就是红色的。如果不是，那么它是hover-able。

修复看起来像这样：

CSS：

.hover { background:blue }
.hover:hover { background:green }
.hoverChecked { background:red }
.hoverChecked:hover { background:green }

JS：

if(document.getElementById('chk').checked) {
  document.getElementById(row).className = 'hoverChecked';
}
else {
  document.getElementById(row).className = 'hover'; 
}

您可能还想修复您的 HTML：

<tr id="row1" style='background:#FFFFFF' class='hover'>

【讨论】：

【解决方案2】：

这就是你想要的，

CSS - 选项 I

 .yellow{ background:yellow; }

Javascript - 选项 I

   function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).className += " yellow"document.getElementById(row).style.background='Red';
    }
    else
    {    
        document.getElementById(row).className = document.getElementById(row).className.replace(/\byellow\b/,'')
    }

    document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className += 'hover';                    

    hover'; }                 
    }       
}

Javascript - 选项二

 function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {    
        document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }                 
    }       
}

HTML

<tr id="row1">

【讨论】：

【解决方案3】：

这是因为你的 if..else:

function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }           
}

您根本不需要 else 路径。 Css 会自动应用你的 :hover 样式。

【讨论】：

对不起，我之前没提过，悬停样式应该只在复选框被取消选中后应用。但是，删除 else 部分仍然无效。

【解决方案4】：

Ie8-9 兼容性？

document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }

ie9 不工作。

【讨论】：

【解决方案5】：

问题解决了！在 html 上放这一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

【讨论】：