Как сделать так, чтобы мои ссылки отображали маленькую прозрачную рамку на: hover?

Question

Я хотел бы отобразить небольшую подсказку, похожую на эту:

Этот маленький черный ящик появляется, когда я наведу на него мышь.Как мне этого добиться?Используете ли вы jQuery или MooTools или как?

Спасибо этому начинающему веб-дизайнеру!

Answer 1

Я думаю, что вы можете сделать это с помощью CSS, нет необходимости в Javascript.

Черный ящик (всплывающая подсказка) может быть абсолютно позиционированным дочерним элементом с display: none по умолчанию, а на :hover вы можете показать его.

Вот небольшая демоверсия .

Пример CSS:

.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }

для HTML (который остается читаемым без CSS!):

<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​

Этот метод будет работать в любом современном браузере, и IE> = 7. IE6 поддерживает только селектор :hover для ссылок, поэтому вам нужно использовать элемент a, если вы хотите его поддержать (или найти другой обход ).

Answer 2

Определенно выглядит как Tipsy , плагин jQuery, который я использовал.

Answer 3

В jQuery, при условии, что у вас есть div, правильно отформатированный следующим образом: (обратите внимание, это очень простой пример. Я не определяю классы для правильного форматирования элементов или чего-то в этом роде)

<a href="AcornsUsage.html" class="acornsremaining">3</a>

и

<div class="onmouseoverpopup parent">
 <div class="onmouesoverpopup arrowontopmiddle"></div>
 <div class="onmouesoverpopup text">Acorns remaining</div>
</div>

Вы можете сделать что-то вроде этого

$(document).ready( function() {
  $(".acornsremaining").hover( function() {
    $(".onmouseoverpopup.parent").show();
  }, function() { 
    $(".onmouseoverpopup.parent").hide();
  });
});

Answer 4

Это делается через JavaScript.Я бы порекомендовал использовать инфраструктуру jQuery, так как есть множество различных плагинов jQuery Tool Tip, готовых для использования.

Например.