Проблема с toggle on mouseenter/mouseleave
Вложений: 1
Привет!
Делаю галерею для сайта. Есть несколько видов картинок: в моем примере это id «nature, car, girl». По задумке, при наведении курсора на тумбнейл, изображение скрывается, на его месте появляется плашка, залитая цветом (своим для каждого id), плюс дополнительный блок поверх плашки с заголовком и описанием. Убрали курсор, плашка с описанием исчезает, картинка возвращается. Частично мне удалось сделать рабочий код:
$(function(){
$('div#nature').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-nature .dscr');
$('#nature .dscr').toggle();
});
$('div#car').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-car .dscr2');
$('.dscr2').toggle();
});
$('div#girl').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-girl .dscr3');
$('.dscr3').toggle();
});
});
Но если добавить новые блоки (с такими же id), при наведении курсора на тумбнейл картинка и плашка ведут себя корректно, а вот описание (дополнительный блок, в коде — dscr) выделяется для одинковых id в разных блоках одновременно. Подскажите, где я накосячил. В аттаче более наглядный рабочий пример. |
Цитата:
|
Они и так уникальные. Это категории. Их три (возможно, будет больше, это не суть). Но разве не может быть три картинки с одинаковыми id?
К тому же с плашками-то всё в порядке. Они выделяются цветом по одной при ховере. Возможно, я сформулировал проблему неправильно — в аттаче наглядный пример. Там сразу видно, что не так. Другой вопрос, что решение не столь очевидно :-( |
Цитата:
Цитата:
ID одинаковых быть не должно и точка. На то оно и ID. |
Ок. Забудем про id и заменим их на классы ))
Вопрос: почему даже если сделать 100 блоков с классом nature при ховере они срабатывают корректно по одному (а не выделяются все вместе)? При этом описание становится видимым одновременно на всех блоках.
$('div.nature').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-nature .dscr');
$('.nature .dscr').toggle();
Думаю, что проблема в 3-й строке. Но как ее изменить, чтобы код отрабатывал корректно, никак не догоню. |
serdeles,
зачем нужен скрипт? |
Цитата:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#slidebox div {
width: 320px;
height: 240px;
float: left;
}
.dscr {
position: absolute;
height: 100%;
background: #017BA3;
}
.dscr * {
color: #fff;
}
#slidebox div img {
display: block;
position: absolute;
z-index: 10;
}
#slidebox div img:hover {
opacity: 0;
}
</style>
</head>
<body>
<div id="slidebox">
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="http://1fenshui.ru/wp-content/uploads/2012/03/400x300_arbol_luminoso.jpg" />
</div>
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="https://fs.net-film.ru/fs41884b.jpg" />
</div>
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="http://gtrk-omsk.ru/upload/iblock/8c8/los.jpg" />
</div>
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="http://pic.oscdn.net/pic/3409886/m" />
</div>
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="http://baikal-turs.ru/wp-content/uploads/2013/12/elnik_456465.jpg" />
</div>
<div>
<div class="dscr">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
<img src="http://images.bankoboev.ru/thumbnail/bankoboev.ru-456870.jpg" />
</div>
</div>
</body>
</html>
|
Спасибо. Но вариант на CSS, к сожалению, не прокатит :-)
Галерея будет работать по принципу pinterest.com — картинки (и блоки, соответственно) будут разного размера по высоте. Категории будут выделены отдельным цветом. Это касается как цвета фона, так и цвета заголовков. Кроме того, категории планируется динамически отсортировывать, логично это делать при помощи jQuery. |
Цитата:
На CSS работает? И для работы требуется минимум. Думаем и... |
В общем-то галерея уже сделана, и работает ))
Но вот код получился многэтажный. Собственно, сюда я и обратился с целью его как-то оптимизировать. Зайти, цскыть, с тылов. Все равно спасибо за потраченное время ) |
| Часовой пояс GMT +3, время: 20:00. |