Подавить заголовки ссылок

StackOverflow https://stackoverflow.com/questions/809795

  •  03-07-2019
  •  | 
  •  

Вопрос

Есть ли способ подавить всплывающие заголовки ссылок, но при этом сохранить их на странице для людей с ослабленным зрением?

Это было полезно?

Решение

Это функция браузера, позволяющая интерпретировать заголовок ссылки и отображать всплывающую подсказку или всплывающее окно.Нет никакого способа подавить их.Я попробовал (потому что клиенту они тоже не понравились), и обойти их невозможно.

Другие советы

Я знаю, что это решено, но я также нашел обходной путь: Скрыть встроенную всплывающую подсказку с помощью jQuery

У меня была проблема с проектом, где клиент хотел отобразить свою собственную всплывающую подсказку (что было сделано с помощью CSS), но она также отображалась из-за всплывающей подсказки, инициируемой браузером, поэтому она отображалась дважды.Мы обошли эту проблему, удалив атрибут «title» и вместо этого используя «data» для заполнения текста в CSS.

Я не понимаю, что вы имеете в виду, говоря о том, чтобы оставить их на странице для слабовидящих, поскольку они видны только в исходном коде?

Например:

<a href="link" title="something">Link title here</a>

на странице будет отображаться ссылка «Название ссылки здесь», а также раздражающее всплывающее окно при наведении на нее курсора.

<a href="link" data="something">Link title here</a>

будет показывать ссылку «Название ссылки здесь», но НЕ будет показывать раздражающее всплывающее окно при наведении курсора, хотя вы все равно можете использовать data тег для ссылки на все, что вы хотите туда поместить (в нашем случае мы помещаем текст всплывающей подсказки, на которую будет ссылаться CSS).

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

Это работает в jQuery.

var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})

... возможно, это было бы не идеально, но вы всегда можете попробовать вместо title атрибут в <a href>, а <span> в рамках <a> теги:

/* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

<head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>

Однако я не считаю это особенно практичным решением.И я вполне уверен, что это не подтвердится.Если бы я знал JS, я бы предложил что-нибудь более работоспособное, но даже тогда я не уверен, что это сработает.

Ссылки в моем браузере не отображают подобные подсказки, если у них нет title атрибут.

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

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top