Hover для нижележащего слоя...
Как? Есть прозрачный png - он должен быть всё время сверху. Но при этом курсор должен реагировать на лежащие под этим png, элементы. Небольшая загвоздка - элементы нижележащего слоя не статичны - они анимированы.
Какие есть варианты? |
Расчитывай координаты...
|
Либо подели картинку (png) на части и вставляй в нужных местах, "обнажая" нужные для реагирования элементы.
|
Не вариант... Координаты можно рассчитывать (там и так будет рассчёт) - как сэмулировать повышение z-index (чтобы работали ховеры, ссылки кликабельными были и т.д.).
Может можно чего намутить с svg? |
Можно сделать OnClick на твою png, и в зависимости от координат (сравнивать с координатами нужных эл-тов) и выполнять нужный код) Получится одна функция с условиями)
|
может быть продублировать элементы которые анимированы под полупрозрачным png
поместить такие же по размеру и расположению элементы сверху, но сделать их прозрачными и обработчики событий мыши назначить на них
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style>
.anim { position: absolute;
top: 0; left: 0; width: 20px; height: 20px;
background: red;
}
.anim.top { /* вверху */
background: transparent;
cursor: pointer;
}
.blue { background: blue; }
img { position: absolute; opacity: .5; left: 0; top: 0;}
</style>
</head>
<body>
<div class=anim></div> <!-- это элемент под картинкой -->
<img src=http://placehold.it/200>
<div class="anim top"></div> <!-- это выше -->
<script>
var $anim = $('.anim');
function anim () {
var x = Math.random() * 180,
y = Math.random() * 180;
$anim.animate({ left: x, top: y}, 4000, anim); // анимируем оба элемента одинаково
}
$('.top').mouseenter(function () { // вешаем обработчик на верхний
$anim.first().toggleClass('blue'); // меняем нижний
});
anim();
</script>
</body>
</html>
|
Желательно опиши необходимость ставить png сверху всего. Может ты что-то решил делать через... А люди тебе в этом помогают.
|
Pavel M.,
То что надо! Не знаю насколько трудно будет её реализовать в моём случае, и насколько это будет ресурсоёмко... Но это ого-го какой вариант для меня. Чёрт, как я сам не додумался... |
Aptyp,
А что описывать? Снизу слой блоков с <img>, через jQ и canvas отрисовывается изменённая копия и накладывается поверх <img>, по ховеру и клику происходят некие пертурбации. Можно сделать ещё эффективнее - при создании копии через canvas, сразу делать пустую копию, оборачивать её ссылкой, и поверх всех. |
| Часовой пояс GMT +3, время: 15:59. |