[подсказка данных] и простота ввода-вывода

Может кто-нибудь сказать мне, почему этот переход к облегчению выхода игнорируется?

http://jsfiddle.net/gqnGN/264/

 


<a href="#" data-tooltip="Link Title" data-tooltip-position="right">LINK</a>


<style>


[data-tooltip]:before {


content: attr(data-tooltip);


display: none;


position: absolute;


background: #000;


color: #fff;


padding: 2px 2px 2px 2px;


font-size: 14px;


line-height: 18px;


min-width: 68px;


text-align: center;


-moz-border-radius: 3px;


-webkit-border-radius: 3px;


border-radius: 3px;


opacity: 0;


}


[data-tooltip-position="right"]:before {


top: 45px;


-ms-transform: translateY(-50%);


-moz-transform: translateY(-50%);


-webkit-transform: translateY(-50%);


transform: translateY(-50%);


}


[data-tooltip-position="right"]:before {


left: 45px;


margin-left: 6px;


}


[data-tooltip]:after {


content: '';


display: none;


position: absolute;


width: 0;


height: 0;


border-color: transparent;


border-style: solid;


}


[data-tooltip-position="right"]:after {


top: 45px;


margin-top: -6px;


}


[data-tooltip-position="right"]:after {


left: 45px;


border-width: 6px 6px 6px 0;


border-right-color: #000;


}


[data-tooltip]:hover:before,


[data-tooltip]:hover:after {


display: block;


z-index: 100;


opacity: 1;


-webkit-transition: all 0.2s ease-in-out;


-moz-transition: all 0.2s ease-in-out;


-o-transition: all 0.2s ease-in-out;


transition: all 0.2s ease-in-out;


}


</style>

Код (разметка):

Теперь, когда для меня это имеет смысл, я могу даже переделать свою версию, чтобы упростить ввод без каких-либо серьезных изменений:
http://jsfiddle.net/gqnGN/276/

Вы также можете использовать left:-999em; и осталось: 0; если вы не хотите, чтобы непрозрачность исчезала.

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

Если у вас есть якоря слишком близко друг к другу, это сработает.

МОГ быть проблемой. Если вы смешиваете его с затуханием непрозрачности, используйте свойство «transition-delay», чтобы «удерживать» левую анимацию при затухании.

Как и в случае с display:none, вы обнаружите две проблемы; во-первых, программы чтения с экрана/чтения Брайля не будут иметь доступа к этому контенту (даже если они ПРЕДПОЛАГАЮТСЯ игнорировать CSS-экран мультимедиа), и пауки тоже могут его не увидеть.

во-вторых, при снятии курсора нет анимации, она просто исчезает .

непрозрачность: 0;

слева:-999em;

переход: непрозрачность 0,45 с, плавность выхода, влево 0 с 0,45 с;

Тогда для ваших наведений:

слева: 3,5эм; /* или сколько бы это ни было для каждого */

Фактически будет работать как внутри, так и снаружи.

Видимость и отображение не могут быть отложены, а лево — можно.

Указав «left» использовать переход 0 с и задержку 0,45 с, он будет откладывать его применение до тех пор, пока переход непрозрачности не завершится полностью.

«Left» за кадром не мешает доступности, поскольку контент все еще остается считается видимым/отображаемым, как и в любом обычном раскрывающемся меню. ... и да, вам нужно говорить «0», а не просто «0», поскольку Firefox слишком глуп, чтобы понять, что ноль — это ноль, когда дело касается секунд.

На самом деле я сделал что-то вроде: видимость: скрыта; непрозрачность: 0; переход: непрозрачность 0,45 с, легкость выхода; а затем часть при наведении: видимость: видимая; непрозрачность: 1;

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

Они работают так, как он есть, и это на самом деле здорово для дополнительных эффектов, которые не обязательно должны быть «содержательными» в разметке.

Хотя правильный TITLE должен быть атрибутом TITLE, вам не нравится стиль по умолчанию, ЖИВИТЕ С НИМ; в противном случае вы говорите пользователям, имеющим специальные возможности, что им самим следует пойти на хуй; но это действительно зависит от того, ДЛЯ ЧЕГО именно применяется эта техника.