Элемент CSS3 с непрозрачностью: 0 (невидимый) реагирует на события мыши

Question

CSS3 с использованием Webkit в Safari;У меня есть кнопка, которая, при нажатии, вызывает появление div. Этот div - просто большой заполненный прямоугольник, и в нем есть несколько кнопок, одна из которых вызывает тот же div для исчезновения.

Проблема заключается в следующем: когда элемент исчезает (непрозрачность: 0), и я нажимаю, где была одна из кнопок, onClick все еще запускается.Другими словами, даже если кнопка не видна (непрозрачность: 0), она все еще там и является частью модели события.Я не хочу этого

Кнопки вызывают следующие функции:

//  This displays the overlay (popup)
function showCategoryPopup() {

 // Was playing with the following, but with no success.
 //  popupCategory.style.display = "block";
 //  popupCategory.style.visibility = "visible";

 // Change the attributes that will be animated.
 popupCategory.style.opacity = 1; 
 popupCategory.style.webkitTransform = "scale(1.0)";
}

function hideCategoryPopup() {
 // Change the animated attributes
 popupCategory.style.opacity = 0; 
 popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events.  So, make it hidden?
//    popupCategory.style.visibility = "hidden";
//    popupCategory.style.display = "none";     

}

Класс CSS для наложения следующий:

.popupContainer {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}

Если я не наденуНе используйте настройки видимости или отображения вообще, анимация в порядке, но события mouseClick запускаются для невидимых элементов.

Если я использую блоки, то он включается / выключается без анимации.

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

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

Мысли?

Answer 1

Чистое (э?) Решение проблемы, с которой вы сталкиваетесь - что является распространенной проблемой для таких вещей, как всплывающие подсказки и модальные всплывающие окна с эффектом постепенного появления, - это не только переход между непрозрачностью, но и " видимость "свойство. В отличие от «отображения», «видимость» является фактическим анимируемым свойством, и оно будет правильно делать то, что делает элемент невидимым (и не реагирующим на входные события) только перед началом перехода и только после того, как переход вернется к исходное состояние.

Предыдущий ответ работает, но зависит от JavaScript для управления свойствами, которые могут быть менее желательны. Сделав все это с помощью чистого CSS, ваш JavaScript не должен делать ничего, кроме как устанавливать и сбрасывать класс для элемента, который должен быть показан. Если вы создаете всплывающую подсказку, ее можно сделать вообще без JS, сделав подсказку дочерним элементом и используя псевдо-селектор «hover» на родительском элементе.

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

#popup
{
  /* ...cosmetic styling, positioning etc... */

  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;

  opacity: 0;
  visibility: hidden;
}

#popup.shown
{
  opacity: 1;
  visibility: visible;
}

Тогда ваш JavaScript может просто переключать «показанный» класс.

Живой пример: http://jsfiddle.net/y33cR/2/

Answer 2

Если вы устанавливаете div на непрозрачность ноль, вы все равно сможете взаимодействовать с «невидимым» элементом.Вы хотите установить вместо него display:none.Вы можете сделать и то и другое, позволяя div исчезнуть до нуля, а затем добавить display:none после завершения анимации.

Answer 3

Что вы можете сделать, это отключить кнопку, когда прозрачность установлена ​​на 0 со следующими стилями:

pointer-events: none;
cursor: default;

Таким образом, они не кликабельны, и курсор не меняется, когда он находится над кнопкой. Мне нужно было решение только для CSS, и это сработало для меня.