Сделать меньшую кликабельную область внутри контейнера div?

Question

То, что я пытаюсь сделать, довольно сложно.

Основная идея состоит в том, что у меня есть div-обертка, скажем, 20 x 20 px, которая скрыта и исчезает, когда я наводю на нее указатель мыши.и исчезает, когда мышь удаляется.Я разобрался с этой частью.

Мой следующий шаг - включить div, содержащий изображение, внутри div-оболочки.Div изображения, который больше (около 300 x 400 пикселей), выходит за границы div-оболочки, так что все изображение становится видимым и, как дочерний элемент div-оболочки, также исчезает при наведении курсора.

Это подводит меня к моей проблеме (ям):

1. При наведении курсора на область изображение исчезает так, как я хочу, но верхправый угол ограничен границей обертки, и он переливается только в нижний левый угол.

2. При наведении курсора на любую область, на которой находится изображение, а не только на область обертки, изображение будет отображаться.

желаемый результат для выпуска 1: Я хочу расположить изображение div внутри оболочки так, чтобы оно переполнялось вверх и влево, а также вниз и вправо.Другими словами, при наведении курсора на область обертки я хочу, чтобы изображение постепенно затухало, полностью перекрывая область обертки, чтобы область обертки была в основном центрирована в области изображения

Желаемый результат для проблемы 2: Я ТОЛЬКО хочу, чтобы эффект затухания активировался при наведении курсора на область 20 x 20.Когда я наведу курсор на любую область, изображение размером 300 x 400 будет покрыто, когда я видим, я не хочу, чтобы что-то происходило.При выключенной мыши Для меня не имеет значения, нужно ли мне покинуть область изображения или область обертки для начала затухания, но если возможно ограничить всю активацию / деактивацию при наведении на область 20 x 20только, это было бы круто.

Я мог бы так легко использовать старое изображение1 поверх изображения2;при наведении на изображение 1 исчезает, показывая трюк с изображением 2, но это все ад, поскольку я хочу, чтобы место активации исчезновения находилось в пределах самой области исчезновения.

ИСК

---

ОБНОВЛЕНИЕ:

Я выяснил номер вопроса 1.

, так что теперь мне просто нужновыясните мою вторую проблему, и я буду в порядке.

Чтобы получить представление о моем прогрессе на данный момент, вот мой сайт: http://silentnoizemusic.com

Прокрутите вниз до области с рекламным щитомна нем написано «SALES@silentnoizemusic.com» и наведите курсор мыши на черный значок Twitter в верхнем левом углу рекламного щита.

Как напоминание, я хочу, чтобы исчезновение в действии происходило ТОЛЬКО при наведении курсораНаведите курсор мыши на область значков Twitter, а не когда я наведу курсор на область, где скрывается исчезающее изображение.Изображение помещается в меньшую оболочку div, установленную на видимое переполнение.Поэтому, если бы вы установили переполнение скрытым, вы бы увидели квадратную область с желтой рамкой, которая исчезает, когда вы наводите курсор мыши на иконку Twitter.Когда я возвращаю оболочку к переполнению: видимый; я хочу, чтобы эта квадратная область активировала функцию наведения, а не какую-либо область вокруг квадрата, которую занимает невидимое переполнение содержимого.

Было бы предпочтительнее, еслибыло не-javascript решение из-за ограничений кодирования, но если js - единственный вариант, я все равно попробую.

Еще раз спасибо,

Isk

Answer 1

Эта проблема возникает из-за того, что ваше изображение является дочерним по отношению к div-элементу-обертке, а зависание над ним рассматривается как зависание над div-элементом-оберткой. Если вы не очень против решения Javascript, вот мое предложение: Возьмите увеличенное изображение за пределами маленького div-оболочки, то есть он больше не ребенок. Но разместите упаковщик и это изображение в тех же местах, что и раньше. Затем, при событии onmouseover на меньшем элементе div, измените видимость изображения, как и раньше. На событии onmouseout снова скрыть увеличенное изображение. Чтобы изменить свойства элемента в ответ на действия с каким-либо другим элементом, вам потребуется Javascript, а CSS не подойдет.

Это HTML и JS. Поместите все это в ваш HTML-файл:

<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>

<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>