Ошибка «видимости» браузера Firefox?

Question

У меня есть некоторые divs (class = "boxes") с некоторым текстом в них в тегах абзаца. Я бы хотел, чтобы текст был невидимым, если не завис.

Однако поведение ведет себя странно. Когда я использую: .boxes p {visibility: hidden;} .boxes p: hover {видимость: visible;} текст скрыт, но не становится видимым при наведении указателя мыши.

Когда я попытался: .boxes р {видимость: видимый;} .boxes р: парить {видимость: скрытый;}
текст будет (после паузы) исчезают, но «мигает», если курсор движется вообще.

Любая идея, что здесь происходит? Firefox часто обновляется автоматически, поэтому я считаю, что использую последнюю версию.

Спасибо!

Answer 1

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

Если вы хотите, чтобы ваши коробки все еще hoverable, либо дать им еще один родительский элемент и скрыть их:

.boxes .parent:hover p { 
    visibility: hidden; 
} 

Или дайте ящики нулю непрозрачности при наведении курсора мыши:

.boxes p:hover { 
    opacity: 0; 
}