Задать вопрос
@janik_o1
Учусь, sorry for my bad questions
javascript

Как выбрать один элемент из 9?

Есть девять картинок , нужно что бы при наведении курсора сработал hover у определенной картинки со своим дивом, как это реализовать ? принцип?
fiddle
P.S актуально
  • Вопрос задан
  • 265 просмотров
4 комментария
Подписаться 2 Оценить 4 комментария
Решения вопроса 1
@OVK2015 
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" />
		<title>Player Demo</title>
		<style>
		.container 
		{
			width: 1200px;
		}

		.content 
		{
			width: 100px;
			height: 100px;
			display: block;
			margin: 10px;
			position: absolute;
			background-color: red;
		}

		.readmore 
		{
			position: absolute;
			display: none;
			margin: 10px;
			width: 100px;
			height: 50px;
			background-color: green;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content" id="1">1</div>
			<div class="content" id="2">2</div>
			<div class="content" id="3">3</div>
			<div class="content" id="4">4</div>
			<div class="content" id="5">5</div>
			<div class="content" id="6">6</div>
			<div class="content" id="7">7</div>
			<div class="content" id="8">8</div>
			<div class="content" id="9">9</div>

			<div class="readmore" id="q1">1</div>
			<div class="readmore" id="q2">2</div>
			<div class="readmore" id="q3">3</div>
			<div class="readmore" id="q4">4</div>
			<div class="readmore" id="q5">5</div>
			<div class="readmore" id="q6">6</div>
			<div class="readmore" id="q7">7</div>
			<div class="readmore" id="q8">8</div>
			<div class="readmore" id="q9">9</div>
		</div>

	</body>
	<script type="text/javascript" src ="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">		
		$(document).ready(function()
		{
			var offsetX = 120,
				offsetY = 10;
			$('.content').each(function(index, item)
			{
				$(item).css({left: offsetX * index, top: offsetY});
				$('.readmore[id=q' + (index + 1) + ']')
					.css({left: offsetX * index, top: offsetY + 110});
			});
			$('.content').bind('mouseover', showDivContent);
			$('.content').bind('mouseleave', hideDivContent);
		});

		function showDivContent(event)
		{
			$('.readmore[id=q' + $(this).attr('id') + ']')
				.css({'display': 'block'});			
		}

		function hideDivContent(event)
		{
			$('.readmore[id=q' + $(this).attr('id') + ']')
				.css({'display': 'none'});		
		}
	</script>
</html>


Верстку под себя переделал,- подправите если что. Ну а как показывать скрывать доп. блоки,- тут полная свобода творчества
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 4
sakrab
@sakrab
Не будь побежден злом, но побеждай зло добром... 
<div class="img1"><img /></div>
<div class="img2"><img /></div>
<div class="img3"><img /></div>
<div class="img4"><img /></div>
<div class="img5"><img /></div>
<div class="img6"><img /></div>
<div class="img7"><img /></div>
<div class="img8"><img /></div>
<div class="drygoi_div"><img /></div>


div.drygoi_duv:hover {
    border:10px solid red;
}
Ответ написан
3 комментария
3 комментария
@ivoronov
Веб-разработчик
Сформулируйте вопрос чуть более развернуто. Получается небольшое недопонимание.
Если вам нужно, чтобы при наведении на элемент у его родителя менялся класс и т.п., то для такой магии есть onmouseover. Посмотрите в сторону событий мыши, в общем :) Да и jQuery - это библиотека, нечего на ней зацикливаться, но если уж приспичило, то будет что-то типа: 

$('ul').delegate('img', 'mouseover', function() {
 $(this).parent() // и т.д.
});


Где конструкция примерно такова:
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
<!-- и т.д. -->
</ul>


Ну или вместо ul и li дивы, не важно.
Ответ написан
Комментировать
Комментировать
@wshaman
Вопрос, конечно, из серии про подземный стук.
Но если, допустим, имеется ввиду, что при ховере на один элемент из imgX, должен срабатывать ховер на другой_дув, то может помочь что-то типа
$('div[class*="img"]').hover(function(){$('div.drygoi_div').trigger('hover');});

Но это плохо уже хотя бы из-за class*=
И да, в CSS класс называется drugoi_duv, а не drygoi_div
Ответ написан
Комментировать
Комментировать
Sabarf
@Sabarf
:last-child - выбирает элементы, которые являются последними потомками своих родителей.
Пример:

$("div span:last-child").css("border", "1px solid blue");


источник www.site-do.ru/js/jquery3.php
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Юзабилити-тестирование сайта с мобильного — сегодня в 16:00 по МСК
18 дек. 2024, в 15:08
300 руб./за проект
Odoo
18 дек. 2024, в 15:00
300 руб./в час
Скрипт для регистрации на быстром стеке
18 дек. 2024, в 14:53
30000 руб./за проект
Ещё заказы