Использование jQuery для установки заголовка атрибута параллельно с CSS3: после - PullRequest
Новая
       11

Использование jQuery для установки заголовка атрибута параллельно с CSS3: после

0 голосов
/ 12 июля 2011

Привет, я использую это, чтобы установить атрибут заголовка для элементов: 

$('.upgradeTables thead tr td:gt(1)').attr('title', 'Upgrade To');

Затем я использую CSS3 для этого: 

.upgradeTables thead tr td:hover:before
{
    background: #000;
    content: attr(title);
    color: #f7f7f7;
    opacity: 0.95;
    display: block;
    font-weight: bold;
    position: relative;
    text-align: center;
    top: 0px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 10px 0.5px #333 !important;
    -moz-box-shadow: 1px 1px 10px 0.5px #333 !important;
    box-shadow: 1px 1px 10px 0.5px #333 !important;
}

Мой вопрос заключается в том, что при наведении указателя мыши на элементы появляются красивые заголовки CSS, которые мне нравятся, и я могу перемещаться по ТД, и над каждым из них появляется надпись «Upgrade To».

Проблема в том, что при наведении курсора на первый я получаю заголовок CSS, но появляется и серый заголовок браузера по умолчанию, который остается видимым при переходе к другим ТД. Как я могу скрыть заголовок по умолчанию, но при этом сохранить CSS: после заголовка, видимого при наведении курсора?

Ответы [ 2 ]

2 голосов
/ 12 июля 2011

К сожалению, нет простого способа отключения подсказок с помощью CSS.Я бы предположил, что использование атрибута title в вашем примере на самом деле не является семантическим (атрибуты title должны объяснять, что скрывается за ссылкой).

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

$('.upgradeTables thead tr td:gt(1)').attr('data-tooltip', 'Upgrade To');

и ваше объявление CSS ... 

content: attr(data-tooltip);
1 голос
/ 13 июля 2011

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

Что если вместо установки атрибута title вы просто вставите всплывающие подсказки в document.ready()?Это даст вам более предсказуемый код .Просто разместите подсказку так, как вам нужно, и, я думаю, она должна решить вашу проблему.

jsFiddle snippet

...