懸停樣式在html表格行中被所選樣式覆蓋

我有一個簡單的html表格，它有幾行。實現如下內容：懸停樣式在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>

欣賞如果你能給我一個解決方案。

來源

2010-11-09 user501579

這是你想要的，

CSS - 選項我

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

來源

2010-11-09 08:10:45

完美，這工作正常。非常感謝Chinmayee！ – user501579 2010-11-09 08:22:17

那是因爲你的if..else的：

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

你不應該需要你的其他路徑都沒有。 Css將自動應用您的：懸停樣式。

來源

2010-11-09 08:03:06 Simon

對不起，我以前沒有提，懸停風格應適用後，才未選中此複選框。但仍然，刪除其他部分不起作用。 – user501579 2010-11-09 08:09:31

它做什麼你告訴它做的事，就在這裏：

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

來源

2010-11-09 08:03:27 Ben

IEE8-9兼容性？

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

不起作用ie9。

來源

2013-01-29 07:37:50 Gabee

問題解決了！放在HTML這一行：

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

來源

2013-01-29 14:41:21 Gabee

懸停樣式在html表格行中被所選樣式覆蓋

回答

相關問題