Удаление эффекта наведения со страницы с возвратом с помощью кнопки «Назад» - PullRequest
Новая
       7

Удаление эффекта наведения со страницы с возвратом с помощью кнопки «Назад»

2 голосов
/ 18 июля 2010

Я работаю над этим сайтом, и на моей стороне небольшой колючка.Когда я нажимаю ссылку в заметке на на этой странице , а затем нажимаю кнопку "Назад", ссылка все равно кажется наведенной.

Что будетнаименее требовательный к сценарию способ, чтобы ссылка не думала, что она все еще зависает?Проблема появляется в Safari, Firefox и Opera, но не в IE8 или Chrome.Протестировано как на Mac, так и на Windows с одинаковыми результатами (за исключением IE8, конечно ... только для Windows.)

Я подумал, что, вероятно, было бы неэффективно прикреплять какое-либо событие mouseover к документу, посколькуон будет срабатывать довольно часто, если только я не пойму неправильно, как события всплывают в DOM.

Вот некоторые источники javascript и html, если вы не хотите разбираться в том, с чем я вас связал: 

/* Link hover effects */

//Fix Opera quirk:
$('.tooltip a').css('left', '0px');

// jQuery hover, animating color smoothly.
// If it's in the #tooltip, bump it to the right 5 pixels while hovered.
$('a').hover(function(){
    if ($(this).is('.tooltip a')) {
        $(this).stop().animate({
            color: '#D42B1D',
            left:  5
        },{
            duration: 'fast'
        });
    } else {
        $(this).stop().animate({color: '#D42B1D'},{
            duration: 'fast'
        });
    }
},function(){
    if ($(this).is('.tooltip a')) {
        $(this).stop().animate({
            color: '#005B7F',
            left:  0
        },{
            duration: 600
        });
    } else {
        $(this).stop().animate({color: '#005B7F'},{
            duration: 600
        });
    }
});


--------------------------------------------------


    <div class="tooltip transp">
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="news.php">News / Events</a></li>
            <li><a href="location.php">Contact Us</a></li>
            <li><a href="directions.php" target="_blank">Directions</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

Ответы [ 2 ]

3 голосов
/ 18 июля 2010

Это избавит вас от проблемы. 

$(window).bind('beforeunload', function(){

     $('a.tooltip').css({color: '#005B7F', left:  0});

});

Однако я хотел бы спросить себя, стоит ли все это js для чего-то, чего можно достичь с помощью css и псевдокласса: hover.

0 голосов
/ 18 июля 2010

Не могу дать вам быстрое исправление, но предложение. Просто попробуйте отредактировать ваш код для использования событий mouseenter и mouseleave. Начиная с jQuery 1.4.1, можно указывать событие наведения мыши (отображение «mouseenter mouseleave») В большинстве случаев это работает лучше.

Проверенный код

У меня работает. 

$('.tooltip').delegate('a', 'mouseenter', function() {

    $(this).stop().animate({
        color: '#D42B1D',
        left:  '5px'
        },{
            duration: 'fast'
    });

});

$('.tooltip').delegate('a', 'mouseleave', function() {

    $(this).animate({
        color: '#005B7F',
        left:  '0'
    },{
        duration: 'fast'
    });

});
...