теневой эффект jquery.com

Question

Я не могу понять, как www.jquery.com сделал эффект тени при наведении на дополнительное меню (Загрузка, Документация ... ". Я думал, что это простой плагин jquery, но я не могу его найти где-либо.

Я нашел это: http://www.hintzmann.dk/testcenter/js/jquery/textshadow/,, что очень прямолинейно, но (конечно) есть проблема с Internet Explorer. Когда расстояние установлено в 1px, IE показывает 2px ..., что делает его бесполезным в моем случае

Меня очень интересует сценарий jquery.com.

(Я видел одно решение для 1px off в IE (/2117567/css3-effekt-teni-teksta-s-pomoschy-jquery),, но я не очень заинтересован в использовании упомянутого скрипта: (

Answer 1

Они используют $ .fn.textDropShadow, очень простую функцию, которая добавляет новый элемент при наведении:

http://static.jquery.com/files/rocker/scripts/custom.js

Answer 2

Их CSS определяется следующим образом:

#jq-secondaryNavigation li a span.jq-shadow, #jq-footerNavigation li a span.jq-shadow {
top: .1em;
left: 1em;
color: #131c25;
position: absolute;
display: none;
}

и они дают тексту атрибут hover здесь:

#jq-secondaryNavigation li a:hover span.jq-shadow

Answer 3

Это просто CSS.Текст повторяется, один раз белым и один раз черным.Черный цвет снизу и смещен на .1em

<a href="http://docs.jquery.com">
   <span class="jq-shadow">Documentation</span>
   <span>Documentation</span>
</a>

CSS:
#jq-secondaryNavigation li a span.jq-shadow {
   top: .1em;
   left: 1em;
   color: #131C25;
   position: absolute;
   display: none;
}