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

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

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

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

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

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

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

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

Ответы

Ответ 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>

Ответ 2

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

Комментарий

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

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