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

  • Автор темы Эльвира2
  • 40
  • Обновлено
  • 17, May 2024
  • #1
Может кто-нибудь сказать мне, почему этот переход к облегчению выхода игнорируется?

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>

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

Эльвира2


Рег
30 May, 2013

Тем
1

Постов
1

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

Lalov


Рег
27 Nov, 2011

Тем
1

Постов
2

Баллов
12
  • 06, Jun 2024
  • #3
Вы также можете использовать left:-999em; и осталось: 0; если вы не хотите, чтобы непрозрачность исчезала.

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

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

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

PITR1


Рег
10 Jan, 2014

Тем
1

Постов
2

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

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

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

слева:-999em;

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

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

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

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

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

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

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

Twinos


Рег
19 Jul, 2014

Тем
1

Постов
3

Баллов
13
  • 09, Jun 2024
  • #5
На самом деле я сделал что-то вроде: видимость: скрыта; непрозрачность: 0; переход: непрозрачность 0,45 с, легкость выхода; а затем часть при наведении: видимость: видимая; непрозрачность: 1;
 

Paffnuty


Рег
01 Jan, 2011

Тем
1

Постов
2

Баллов
12
  • 12, Jun 2024
  • #6
Возможно, вам захочется изучить использование селекторов атрибутов, особенно для пользовательских атрибутов данных.

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

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

владимир киевский


Рег
30 Oct, 2012

Тем
0

Постов
3

Баллов
3
Тем
49554
Комментарии
57426
Опыт
552966

Интересно