Javascript выбивает CSS: hover? - PullRequest
Новая
       7

Javascript выбивает CSS: hover?

1 голос
/ 22 апреля 2010

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

http://www.jaybrand.co.uk/p1.html

в момент загрузки страницы и при наведении курсора CSS устанавливается положение фона так, чтобырисунок позади создает эффект переворачивания.

Я поместил некоторый JavaScript, чтобы установить положение фона для переворачивания при клике, но это выбивает зависание CSS:

onclick = "setStyle ('c1 ',' backgroundPosition ',' 0px 0px ');

это означает, что c1: hover больше не работает .. я пытался поместить! важное в CSS положение фона c1: hover, и это исправило это в Firefox, ноне IE.

Как я могу написать что-то в Javascript, чтобы также сказать:

onclick = "setStyle ('c1: hover', 'backgroundPosition', '- 276px 0px');

......... Я знаю, что Javascript не использует дефисы, и способ получить, например, «background-position» в CSS - это отказаться от дефиса и сделать капитальный перевод «P».возможно, что-то можно сделать и для доступа к атрибуту CSS hover?

Ответы [ 2 ]

1 голос
/ 22 апреля 2010

Когда вы устанавливаете элемент style.backgroundPosition, это то же самое, что и встроенный атрибут style="background-position: ...". Поскольку встроенные атрибуты стиля переопределяют правила таблицы стилей, правила наведения / не наведения больше никогда не могут влиять на положение фона.

Вы можете удалить правило backgroundPosition для невыбранных элементов, чтобы правила таблицы стилей могли просвечивать. Но на самом деле ваш код нуждается в серьезном рефакторинге: ручная установка каждой фоновой позиции в onclick уродлива и не поддерживается.

Вместо этого переключите класс, чтобы пометить выбранную ссылку, например. в стиле так: 

.c { background: url(...); }
#c1.selected, #c1:hover { background-position: -276px 0; }
#c2.selected, #c2:hover { background-position: -276px -61px; }
...

Разметка: 

<h2><a class="c selected" id="c1" href="#productcats">Products</a></h2>
<a class="c" id="c2" href="#rice">Rice</a>
...

(a -inside- h2, потому что обратный путь недопустим.)

сценарий: 

var selected= $('#c1');
$('.c').click(function() {
    // Move the 'selected' class to the new element
    //
    selected.removeClass('selected');
    selected= $(this);
    $(this).addClass('selected');

    // Scroll target element into view
    //
    var y= $(this.hash).offset().top-$('#slide').offset().top;
    $('#slide').animate({top: -y+'px'}, {duration: 450, queue: false});

    return false;
});

Обратите внимание, что здесь используется ссылка на ссылки, указывающая, куда они идут, что улучшит доступность в невизуальных браузерах. Вы также должны добавить код, чтобы посмотреть на location.hash при загрузке страницы, и если вы что-то там увидите, прокрутите эту страницу в поле зрения. В противном случае будет невозможно добавить в закладки одну из ваших подстраниц или щелкнуть средней кнопкой мыши на новой вкладке ссылки или что-то в этом роде.

0 голосов
/ 22 апреля 2010

Я делал что-то похожее на днях, не уверен на 100%, но это может помочь подтолкнуть вас в правильном направлении. 

 onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"
...