krash, Quote (krash)
Подскажите пожалуйста как)
Quote (krash)
Вот ещё вопрос - а возможно ли сделать подсветку таблицы в uCoz? И как это сделать?
Quote (YuriT)
Но есть ньюанс: в IE (по крайней мере до IE6) этот псевдокласс работал только в применении к ссылке, т.е. к элементу A.
... Несомненно, через CSS - наиболее «грамотный» способ, но в ранних версиях ИЕ, и некоторых других браузерах - не работает, по этому, можно сделать «комбинированно» (вот такое слово - по другому - не придумал ... эх, и где «моя родная русский язык» ...)
Варинтов, как минимум, несколько. Вот первый:
Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr>
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>
В CSS:
Quote (CSS)
<style type="text/css">
.myHoverTb tr:hover td{background-color:#CCC;} /* Для нормальных браузеров */
.myhover td{background-color:#CCC;} /* Для ИЕ и прочих */
</style>
JavaScript:
Quote (JavaScript)
<script type="text/javascript" defer="defer">
$(document).ready(function(){
$(".myHoverTb tr").hover(
function(){$(this).addClass('myhover');},
function(){$(this).removeClass('myhover');
});
});
</script>
----- // ---- Вариант два:
CSS - тот же. HTML:
Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>
----- // ----- Вариант нумер три:
CSS - можно не трогать, меняем только HTML:
Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.style.backgroundColor='#CCC'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#F0F'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#FF0'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>
Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
Примеры:
☑ Вариант с JS+JQ+CSS
☑ Вариант с JS+CSS
☑ Вариант с JS
Flesh
