2016-04-28 13 views
0

Это HTMLНе можете нажать кнопку из-за наложения?

<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li> 

Это CSS

.navs:after { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: #0d0d0d; 
    opacity: 0.5; 
    transform: scaleY(0); 
    transform-origin: 0 100%; 
    transition: all .2s ease-out; 
} 
.navs:hover:after{ 
    transform: scaleY(1); 
} 
.navs:active:after{ 
    background: #FFFFFF; 
} 

Я думаю, что причина, почему я не могу нажать на кнопку, потому что, когда я нажимаю кнопку, покрышка формы. Однако я не хочу удалять оверлей. Есть ли способ щелкнуть по наложению?

+0

добавить стиль = "Z-индекс: 99999999999 важно;!" внизу вы хотите быть на более высоком уровне, чтобы вы могли нажать –

+2

Не использовать! important - убедитесь, что ваш селектор так же специфичен, как и должен быть. И нет необходимости сходить с ума по индексу z - установите его на максимальное значение, которое нужно сейчас; вы всегда можете увеличить его позже, если это необходимо. –

+2

@HatemAhmed Вау ... Не могли бы вы дать худший совет? Wow .... –

ответ

8

Вариант один

Вы можете дать вашей мыши высшее z-index. Это переместит кнопку над накладкой, так что вы сможете кликать

Вариант два

Вы можете отключить все события мышей на вашей накладке с помощью pointer-events:none; поэтому событие щелчка «провалиться», это и кнопка зарегистрирует его

Редактировать: Используйте указатели-события, когда можете, пусть z-index будет вашим планом резервного копирования. Если вы вернетесь к нему, я предлагаю вам не использовать его встроенный, но напишите конкретный селектор для него в своем CSS.

+0

Насколько хорошо поддерживается 'pointer-events'? –

+1

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events очень хорошо. – cocco

+1

Спасибо! Это было действительно полезно! – REVENTONMC

0

использование диапазона вместо до и после что-то вроде

<a href="my link"><img class="" src="my_image" alt=""> 
<span class="rig-overlay"></span> 
<span class="rig-text"> 
<span>name</span> 
<span>function</span> 
</span> 
</a> 

пролета не будет покрывать область интерактивной

Смежные вопросы