CSS - Hover проходит через элементы, чтобы активировать наведение на покрытый элемент

Question

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

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

Под этим элементом есть несколько элементов, к которым применены псевдоклассы CSS Hover.

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

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

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

Спасибо

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

Answer 1

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

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;
}

  <div> on top of all: hover me </div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


    

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

Answer 2

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

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

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