эффект зависания с img внутри якоря

Question

Я пытаюсь создать сценарий с javascript и jquery, в котором один элемент реагирует, когда мышь наводится на другой элемент. Мне очень помогли добраться до этого момента, но я думаю, что я что-то здесь испортил. У меня это работает в одном направлении, но не в другом. В направлении, в котором это работает, внутри элемента привязки есть текст. В направлении не работает, внутри якоря есть изображение. Это может меня испортить, не уверен. Я разместил упрощенную версию всего этого здесь: http://jsfiddle.net/vZAYY/14/ Похоже, что JavaScript не находит элемент li (он возвращает -1)

Еще одна странная вещь заключается в том, что на полном сайте (который я запускаю локально) ни один из них не работает, хотя для сборки js fiddle я просто скопировал код напрямую. Он находится на сайте с drupal и там скрипт возвращает -1 от hovers на обоих элементах.

Есть предложения?

Answer 1

Ваш код немного беспорядок, но если что-то возвращает -1, это должна быть функция index(). Не могу сказать точно, но ваша проблема может быть здесь:

var x = $(this).parent().parent().parent("li").index();
$(".mainNavigation ul li:eq(" + x + ")").addClass("active");

Я не уверен, parent().parent().parent('li').index() - лучшая идея. Я имею в виду, index() принимает контекст, который вы можете указать. Хорошей идеей будет предварительно кэшировать ваши селекторы.
Во второй строке вместо :eq я бы использовал eq(), что будет быстрее и более предсказуемо.