Question

我有一个简单的html表，它有几行。实施以下内容

1）我已经为行的鼠标悬停事件指定了样式，以便在鼠标移过它时它会突出显示。

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>

感谢你能否给我一个解决方案。

Answer 1

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

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

你说，如果它被检查，那么它是红色的。如果不是，那就是hover - 能够。

修复会看起来像这样：

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'>

Answer 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 - 选项II

 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">

Answer 3

这是因为你的if..else：

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

你根本不需要你的其他路径。 Css会自动应用你的：悬停样式。

Answer 4

Ie8-9兼容性？

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

不起作用ie9。

Answer 5

问题解决了！把这行放在HTML上：

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

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

5 个答案: