Я пытался сделать кнопки, используя простую структуру:нажмите() в верхней части кнопки диапазона не работает
<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button">Tout</span>
</a>
Он работает, на самом верху кнопок за исключением. Мы можем нажать на него, активируется CSS, но не связанный с jQuery.
Спасибо за вашу помощь!
Проблема с этим правилом:
.button:active {
position: relative;
top: 3px;
}
Как кнопка перемещается вниз на 3 пикселя, когда кнопка мыши отпущена, курсор не находится над кнопкой, чтобы действие не было зарегистрировано. Если вы закомментируете этот фрагмент кода, вы увидите, что он исправляет проблему.
Попробуйте вместо этого придумать другой эффект при нажатии кнопки, которая не перемещает кнопку в ту или другую сторону.
+1, хорошо заметили, я искал что-то в этих строках, но вы избили меня :) –
+1 для этого .. Я подумал, не связано ли это с этим правилом. – ClarkeyBoy
+1! Здесь обновленная скрипка с решением: http://jsfiddle.net/vqrdW/13/ – phemios
<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button" style="display:block;width:100%;height:100%">Tout</span>
</a>
не работает ... извините ... вот рабочая версия Редакцией:
a.filter {
text-decoration:none;
display:block;
float:left;
line-height:40px; /*(or whatever is that button's height)*/
}
Если вы уже устанавливаете блок отображения, ширина и высота установки бесполезны. Кроме того, другие кнопки работают и используют диапазон. – amosrivera
извините! Я редактировал мой пост! –
Добавьте отступы на теге вместо .button:
a.filter {
padding: 8px 14px 10px;
}
.span:active {
pointer-events: none;
}
Можете ли вы объяснить, почему это работает, поэтому есть контекст для вашего ответа? – Shawn
работает для меня (хром 16) – amosrivera
@amosrivera - В самом деле? Я вижу проблему в Chrome 16, если вы нажмете вверху вверх (как и верхняя пара пикселей). –
мой плохой вы правы, проблема возникает при нажатии на верхние 2 пикселя – amosrivera