CSS + изменение непрозрачности при наведении + мерцание

Question

Я пытаюсь добиться очень простой вещи: изменить непрозрачность строки таблицы при наведении.

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

Я сделал пример, чтобы вы знали, что я имею в виду:

http://jsfiddle.net/yfhTW/2/

Это поведение - ошибка браузера или что-то не так с моим кодом?И можно ли это как-то исправить?Я пытался использовать скрипт Jquery вместо изменения непрозрачности с помощью CSS, но результаты те же: /

Answer 1

Ха, это почти та же проблема, что иногда бывает у вебкита.Итак, я попытался эмулировать исправление для webkit (с -webkit-transform: translateZ(0)), но с использованием 2D-преобразования, и оно сработало!

Так что, похоже, просто добавив -moz-transform: rotate(0); к элементамкоторые подвержены мерцанию, решает проблему: http://jsfiddle.net/kizu/yfhTW/4/

Answer 2

Попробуйте добавить border: 1px solid transparent; к элементу (не к :hover псевдоклассу).У меня это сработало.

Answer 3

Для тех, кто приезжает сюда, у которых изображение с непрозрачностью не равно 1 и с аналогичным мерцанием, убедитесь, что вы установили background-color:white; на изображение!Я знаю, что это не решает вопрос под рукой, но это аналогичная проблема.

.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }

Answer 4

Это не сработало для меня, и поэтому я подумал, что упомяну, что сделал.Мне пришлось добавить переполнение: скрыто для всех окружающих элементов.

Answer 5

Если затронутый элемент уже переведен (и, таким образом, исправление от kizu не применимо), убедитесь, что установлено -webkit-backface-visiblity:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Answer 6

Попробовав вышеизложенные предложения, добавив z-индекс к элементу, который был применен, чтобы решить проблему для меня.