Последние записи

made in programmersforum 3

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

16th
Июл

Открыть изображение в ячейке таблицы TD при наведении курсора на строку таблицы TR

Posted by obzor under CSS, HTML

Как сделать так, чтобы например при наведении TR открывалась моя фотка?

Код:

<style>

</style>
 <table cellpadding="5px" border="1">
 <tr> <<--
 <td> 1
 </tr>
 <tr>
<td style="visibility: hidden"><img src="me.png"></td>
</tr>
 </table>

Arigato

Пример через CSS, при наведении на вторую строку во второй ячейки отображается указанное изображение.

Код:

<!DOCTYPE html>
<html>
<head>
	<style>
		#table-me {
			border: 1px solid black;
		}
		#table-me td {
			padding: 5px;
			border: 1px solid black;
		}
		#td-me {
			/* Указать размеры фото */
			width: 240px;
			height: 240px;
		}
		#tr-me:hover #td-me {
			background: 5px no-repeat URL("me.png");
		}
	</style>
</head>
<body>
	<table id="table-me">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr id="tr-me">
		<td>3</td>
		<td id="td-me"></td>
	</tr>
	</table>
</body>
</html>