Javascript-форум - Событие mouseover для всех тегов с одинаковым id

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Событие mouseover для всех тегов с одинаковым id (https://javascript.ru/forum/jquery/49682-sobytie-mouseover-dlya-vsekh-tegov-s-odinakovym-id.html)

Событие mouseover для всех тегов с одинаковым id

Здравствуйте. Столкнулся с проблемой. Например, есть несколько одинаковых div'ов, с одинаковым id. Как сделать, чтобы событие mouseover и mouseout срабатывали на любом из этих div'ов, а не только на первом найденном. Не буду же я задавать каждому свой отдельный id и для каждого прописывать событие?

Мой код:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-2.1.1.js"></script>
		<style>
			#div {
				width: 100px;
				height: 100px;
				border: solid 1px black;
				margin: 10px 10px;
				background-color: green;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<div id="div"></div>
		<div id="div"></div>
		<div id="div"></div>
		<div id="div"></div>
	</body>
</html>

<script>
	$('#div').mouseover(function()
	{
		$('#div').css('background-color', 'red');
	}).mouseout(function()
	{
		$('#div').css('background-color', 'green');
	});
</script>

Цитата:

Сообщение от Alexew

Не буду же я задавать каждому свой отдельный id и для каждого прописывать событие?

id - идентификатор. Он априори должен быть уникальным для каждого элемента. Используйте класс.

Цитата:

Сообщение от BETEPAH (Сообщение 327246)

id - идентификатор. Он априори должен быть уникальным для каждого элемента. Используйте класс.

Спасибо. Классы вчера пробовал использовать, но при наведении курсора на любой из блоков изменяли цвет все пять. Сегодня со свежей головой до меня дошло, что может есть в этом языке что-то типа this.

Но вот начал рыться глубже. Как мне заставить изменять нужный дочерний div при наведении на родительский?

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-2.1.1.js"></script>
		<style>
			.div {
				width: 100px;
				height: 200px;
				border: solid 1px black;
				margin: 10px 10px;
				float: left;
			}
			.div_chil {
				width: 100px;
				height: 100px;
				border-bottom: solid 1px black;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="div"><div class="div_chil"></div></div>
		<div class="div"><div class="div_chil"></div></div>
		<div class="div"><div class="div_chil"></div></div>
		<div class="div"><div class="div_chil"></div></div>
		<div class="div"><div class="div_chil"></div></div>
	</body>
</html>

<script>
	$('.div').mouseover(function()
	{
		$('.div_chil').css('background-color', 'red');
	}).mouseout(function()
	{
		$('.div_chil').css('background-color', 'green');
	});
</script>

$('.div').mouseover(function() {
  $(this).find('.div_chil').css//...

Цитата:

Сообщение от BETEPAH (Сообщение 327253)

$('.div').mouseover(function() {
  $(this).find('.div_chil').css//...

Благодарю.