Тема: hover и active
Показать сообщение отдельно
  #4 (permalink)  
Старый 16.12.2018, 23:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<div id="blockIMG">
		<img alt="1" id="img1" src="https://javascript.ru/cat/list/dom.gif">
		<img alt="2" id="img2" src="https://javascript.ru/cat/list/event.gif">
		<img alt="3" id="img3" src="https://javascript.ru/cat/list/donkey.gif">
	</div>
	<div id="hovAct"></div>
	<script>
		var imgData = {
			img1: {
				name: 'название-1',
				diskr: 'описание-1'
			},
			img2: {
				name: 'название-2',
				diskr: 'описание-2'
			},
			img3: {
				name: 'название-3',
				diskr: 'описание-3'
			}
		};
		var blockIMG = document.querySelector('#blockIMG'),
			hovAct = document.querySelector('#hovAct');
		blockIMG.addEventListener('mouseover', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : '');
		blockIMG.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');

	</script>
Ответить с цитированием