Стиль наведения переопределяется выбранным стилем в строке таблицы html - PullRequest
Новая
       5

Стиль наведения переопределяется выбранным стилем в строке таблицы html

0 голосов
/ 09 ноября 2010

У меня есть простая таблица 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>

Благодарим Вас за решение.

Ответы [ 5 ]

2 голосов
/ 09 ноября 2010

Он делает то, что вы говорите, прямо здесь: 

if(document.getElementById('chk').checked)
{
    document.getElementById(row).style.background='Red';
}
else
{
    document.getElementById(row).onMouseOver = function() { this.className = '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'>
1 голос
/ 09 ноября 2010

Это то, что вы хотите,

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">
0 голосов
/ 29 января 2013

Проблема решена!Поместите на html эту строку: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
0 голосов
/ 29 января 2013

Ie8-9 совместимость? 

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

Не работает ie9.

0 голосов
/ 09 ноября 2010

Это из-за вашего if..else: 

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

Тебе вообще не нужны твои другие пути. Css автоматически применит ваши стили наведения:

...