Показать слой / div со ссылками на изображение при наведении

Question

Мы пытаемся имитировать что-то похожее на IBM - см. Графическое окно (Давайте построим умнее планетное окно), которое при наведении курсора показывает слой со ссылками.

Любая помощь / ссылка высоко ценится.

Спасибо! K

Answer 1

Это довольно распространенный эффект. Они имеют панель прокрутки со скрытым, абсолютно позиционированным контейнером .ibm-expand-overlay. Они оба обернуты в относительно позиционированном div. Эффект срабатывает на mouseenter дочернего элемента панели, в их случае .ibm-columns

$('.ibm-columns').mouseenter( function() {

  //some positioning logic is needed here
  //probably $('.ibm-expand-overlay').css('left', $(this).index() * childWidth ) is sufficient enought

  $('.ibm-expand-overlay').fadeIn();
} );

$('.ibm-expand-overlay').mouseleave( function() { $(this).fadeOut(); } ); //to hide on mouseleave

Answer 2

Что вам нужно, это плагин всплывающей подсказки JavaScript. Попробуйте Google "JQuery плагин всплывающей подсказки".

Хорошим плагином является плагин всплывающей подсказки ( howto , download ). Вы можете сделать собственный HTML в окне всплывающей подсказки.