Таблица со сложной подсветкой ячеек

NonCommalg · October 18, 2010

Есть таблица (16×41) значений функции Лапласа, надо, чтобы при наведении курсора на ячейку, подсвечивались её родительские ячейки, расположенные на первой сроке и первом столбце, либо вся строка и весь столбец до данной ячейки.

Может быть кто-то знает, как это реализовать в HTML/CSS (желательно без скриптов)?

Спасибо за внимание!

psywalker · October 18, 2010

Чтобы подсвечивались родительские элементы или соседние, это уже JS

SelenIT · October 18, 2010

На правах технического извр... пардон, курьеза:

<!DOCTYPE html>
<title>Test</title>
<meta charset="utf-8" />
<style type="text/css">
.container { position: relative; }

tr:hover { background: #fcc; }

td, td:hover del { width: 50px; }

td:hover span {
	display: block;
	position: relative;
	background: #ffc;
}

td:hover del {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	background: #cfc;
	z-index: -1;
}
</style>
<div class="container">
	<table>
		<tr>
			<td><span>1.1</span><del></del></td>
			<td><span>1.2</span><del></del></td>
			<td><span>1.3</span><del></del></td>
			<td><span>1.4</span><del></del></td>
			<td><span>1.5</span><del></del></td>
		</tr>
		<tr>
			<td><span>2.1</span><del></del></td>
			<td><span>2.2</span><del></del></td>
			<td><span>2.3</span><del></del></td>
			<td><span>2.4</span><del></del></td>
			<td><span>2.5</span><del></del></td>
		</tr>
		<tr>
			<td><span>3.1</span><del></del></td>
			<td><span>3.2</span><del></del></td>
			<td><span>3.3</span><del></del></td>
			<td><span>3.4</span><del></del></td>
			<td><span>3.5</span><del></del></td>
		</tr>
		<tr>
			<td><span>4.1</span><del></del></td>
			<td><span>4.2</span><del></del></td>
			<td><span>4.3</span><del></del></td>
			<td><span>4.4</span><del></del></td>
			<td><span>4.5</span><del></del></td>
		</tr>
	</table>
</div>

Правда, работает (в IE7+, FF3+ и остальных актуальных, по идее) только при жестко заданной ширине ячеек. Лишний код можно заменить псевдоэлементами — но ценой поддержки IE7. В реальном рабочем проекте, имхо, действительно лучше скрипты.

Sign In

Таблица со сложной подсветкой ячеек

Question

NonCommalg

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information