Intereting Posts
Как программно щелкнуть элемент ссылки с помощью HTMLElement? Вставьте HTML-код со сценариями, которые должны запускаться Что может вызвать эту проблему с HTML / CSS-рендерингом в Firefox? Переполнение: скрытые точки в конце Создание звука «на лету» с помощью javascript / html5 как программно нажать кнопку, загруженную с другой страницы? Изменение содержимого div при нажатии на ссылку / кнопку Встраивание html-кода в хранимые процедуры Как создать сетку с Html и CSS с помощью DIVS Как добавить кнопку «Добавить в избранное» или ссылку на мой сайт? Множественный выбор предельного числа выбора Как преобразовать все данные div в изображение и сохранить его в каталог без использования canvasа? Angularjs избегают научной нотации для числового фильтра Как изменить class для всех элементов, полученных с помощью document.getElementsByClassName Нарисовать границу вокруг каждой страницы при печати CSS?

CSS – Наведение проходит через элементы, чтобы активировать зависание на закрытом элементе

У меня есть макет страницы, включающий много абсолютной позиции и z-индексацию, поэтому есть много элементов, которые перекрывают друг друга.

Один из элементов просто содержит текст, и он парит над множеством других вещей.

Под этим элементом есть несколько элементов, которые используют CSS-classы Hover Pseudo Classes.

Когда мышь проходит над элементом, содержащим текст, я хотел бы как-то элемент под ним ответить на присутствие мыши и активировать стили псевдоclassа.

Есть ли способ стилизовать элемент, чтобы он позволял наводке проходить через него к любым элементам внизу?

Это не было бы слишком сложным с JavaScript, но я бы предпочел не идти по этому маршруту в настоящий момент, чтобы держать вещи такими же простыми, какими они могут быть. Я буду усложнять ситуацию с JavaScript достаточно позже.

благодаря

PS – Я уже использую HTML5 и CSS3, поэтому у меня не возникнет проблем с решениями, использующими эти новые стандарты.

вы можете использовать pointer-events: none; к элементу сверху:

см. http://jsfiddle.net/7aeDt/

как вы можете видеть, когда вы наведете элемент сверху, активируется элемент позади. Для получения дополнительной информации об этом свойстве: https://developer.mozilla.org/en/CSS/pointer-events

пример :

 
on top of all: hover me
1
2
3
4

CSS

 div { width : 200px; height : 200px; float : left; cursor : pointer; border : 1px green solid; } div + div:hover { background: #a1a6c8; } div:first-child { pointer-events : none; position : absolute; top : 100px; left : 100px; border : 1px green solid; background : #c1c6c8; } 

Кроме того, что-то, что может показаться полезным людям, заключается в том, что вы можете повторно активировать события указателя на дочерние элементы указателя-события: none element, установив их в указатель-события: автоматически. Это, похоже, не очень хорошо документировано и оказывается очень полезным. – slicedtoad

Комментарий @ slicedtoad был очень полезен для меня, поэтому я думаю, что он заслуживает полного ответа. Если вы устанавливаете pointer-events: none для родителя, вы отключите события для своих детей. ОДНАКО, если вы установили point-events: auto для детей, они снова будут работать.

Это также работает, когда у детей есть отрицательный z-index и поэтому не реагирует на указатели-события.