Positioning отключает при наведении курсора селекторные и события наведения мыши

Question

Это jsfiddle ..

https://jsfiddle.net/9e1wd245/12/

..demonstrates поведение браузера, я хотел бы понять лучше, чем я.

Если вы удаляете позиционирование из крошки и крошки, выбранный наклонный CSS применяется, когда крошка зависнет, а события мыши начинают срабатывать, когда мышь входит в крошку.

С позиционированием на месте, ни одна из этих вещей не происходит; но если вы наведите указатель мыши на верхнюю границу , применяется наклонный CSS и запускается событие mouseover.

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

Обратите внимание, что вы можете принять отрицательное правое поле и проблема остается, поэтому она не вызвана отрицательной маржой.

Я понимаю, что могу использовать svg для крошки или, возможно, использовать пару элементов разделителя на общем фоне вместо использования позиционирования и z-индексации, но почему это не работает? Есть ли что-то в спецификации, которая говорит, что события с зависанием и мыши не должны работать для позиционированных элементов? Есть ли что-то еще, что я игнорирую?

HTML:

<div class="crumbtray"> 
    <span class="crumb">USA</span> 
    <span class="crumb">California</span> 
    <span class="crumb">Sacremento</span> 
</div> 

CSS:

.crumbtray { 
    position: relative; 
    top: 0px; 
    left: 0px; 

    display: inline; 
    z-index: -10; 
    font-family: ariel, sansserif 
    font-size: 12px; 
} 
.crumb { 
    position: relative; 
    top: 0px; 
    left: 0px; 

    display: inline; 
    border: solid 1px gray; 
    border-left: none; 
    border-radius: 0px 10px 10px 0px;  

    padding: 0px 8px 0 12px; 
    margin-right: -10px; 
    cursor: pointer; 

    background: #c3f4c6; 
    background: -moz-linear-gradient(top, #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%); 
    background: -webkit-linear-gradient(top, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%); 
    background: linear-gradient(to bottom, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0); 
} 
.crumb:hover { 
    background: none; 
    background-color: yellow; 
} 

.crumb:first-child { 
    border-left: solid 1px gray; 
    z-index: 60; 
    padding-left: 2px; 
} 
.crumb:nth-child(2) { 
    z-index: 50; 
} 
.crumb:nth-child(3){ 
    z-index: 40; 
} 

JavaScript:

var ViewModel = { 
    init: function(){ 
     console.log("ViewModel.init called"); 
     $('.crumbtray').on('mouseover','span',function(){ 
      console.log('mouseover crumb: ', this); 
     }); 
    } 
}; 

$(ViewModel.init); 

Answer 1

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

Когда вы устанавливаете отрицательный элемент z-index для элемента, он создает отрицательный контекст стекирования всех дочерних элементов, поэтому ширина z-индекса 40, 50, 60 имеет смысл только внутри его родительского элемента, но основной z-индекс будет отрицательный (под элементом тела).

Таким образом, главная проблема отрицательный Z-индекс, вы можете вырезать его и искать информацию с ключевыми словами «отрицательный Z-индекс при наведении», чтобы прояснить ситуацию

.crumbtray { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: inline; 
    z-index: -10; 
    font-family: ariel, sansserif 
    font-size: 12px; 
} 

Answer 2

Ваша проблема здесь:

z-index: -10; 

Это помещает элемент за фон, что означает, что, хотя вы можете его увидеть, мышь не может «видеть» его, потому что он находится за (прозрачным) фоном, поэтому он не получает события mouseover.

Теперь должен все еще работать, потому что .crumb s имеют положительный z-индекс, над фоном. Вероятно, что есть просто ошибка, я не верю, что это поведение документировано где угодно.