Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2014, 02:03
Аватар для Alexew
Новичок на форуме
Отправить личное сообщение для Alexew Посмотреть профиль Найти все сообщения от Alexew
 
Регистрация: 24.08.2014
Сообщений: 3

Событие 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>
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2014, 12:52
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Alexew
Не буду же я задавать каждому свой отдельный id и для каждого прописывать событие?
id - идентификатор. Он априори должен быть уникальным для каждого элемента. Используйте класс.
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2014, 13:43
Аватар для Alexew
Новичок на форуме
Отправить личное сообщение для Alexew Посмотреть профиль Найти все сообщения от Alexew
 
Регистрация: 24.08.2014
Сообщений: 3

Сообщение от BETEPAH Посмотреть сообщение
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>

Последний раз редактировалось Alexew, 24.08.2014 в 13:56.
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2014, 14:51
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

$('.div').mouseover(function() {
  $(this).find('.div_chil').css//...
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2014, 14:56
Аватар для Alexew
Новичок на форуме
Отправить личное сообщение для Alexew Посмотреть профиль Найти все сообщения от Alexew
 
Регистрация: 24.08.2014
Сообщений: 3

Сообщение от BETEPAH Посмотреть сообщение
$('.div').mouseover(function() {
  $(this).find('.div_chil').css//...
Благодарю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать ссылки из файла CSS корректными для всех директрорий сайта? GrEb (X)HTML/CSS 7 28.01.2020 12:56
Browser Object Model, где найти для всех платформ? alta Javascript под браузер 2 09.10.2010 21:24
Событие change для всех элементов exvion jQuery 2 25.01.2010 18:18
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 18:27
Как присвоить текст строке состояния для всех браузеров? Tend Общие вопросы Javascript 4 14.05.2009 16:38