Как принудительно навести курсор мыши на все ссылки определенного класса

У меня есть определенное количество ссылок на моей странице. Атрибут href каждой ссылки связан с изображением. Поэтому, когда я навожу курсор на определенную ссылку, отображается соответствующее изображение. Я хочу сделать этот процесс автоматизированным, чтобы ссылки зависали мышью в течение 5 секунд одна за другой. Я пробовал это, но это не работает:

 function circulate(){
  $('.circulating-links').each(function(){
      $(this).trigger('mouseover'); 
  });
 }

Я поместил приведенный выше код в $(document).ready(), но не вижу никакого результата. Но тут есть небольшой нюанс. Если я назначу приведенную ниже функцию атрибуту «onmouseover» этих ссылок, я получу отображаемые предупреждения;

function showAlert()
{
  alert("Hello");
}

Чтобы обернуть все это: когда я навожу ссылки с помощью мыши, я вижу, как меняются изображения. Но если я вызову событие mouseover, я не смогу получить тот же результат.


jquery mouseover
person Mikayil Abdullayev    schedule 14.11.2012    source источник
comment
Нужно увидеть ваш HTML и, возможно, CSS. Скрипка была бы очень кстати.   -  person Lowkase    schedule 14.11.2012
comment
Я обновил свой ответ небольшим примером. Я предположил, что вы пытаетесь перебрать ссылки определенного класса и вывести изображение из href.   -  person Felix    schedule 14.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Хм, похоже, триггер просто вызывает установленный вами обработчик (в вашем примере отображается предупреждение). Он не устанавливает стиль :hover css.

Документация jQuery говорит:

trigger() — выполнить все обработчики и поведения, прикрепленные к совпавшим элементам для данного типа события.

Я не совсем уверен, что вы пытаетесь сделать, но если вы просто хотите просмотреть ссылки определенного класса, получить href и отобразить изображение, на которое он указывает, вы можете сделать что-то вроде этого:

Вот jsfiddle кода: http://jsfiddle.net/G6AbM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <style type="text/css">
            body {color: #000; text-align: center}
            .myLink { text-decoration: underline; }
        </style>

        <script type="text/javascript">
            $.onReady = new function() {
                setTimeout(imageChange, 500);
            }

            var nextImage = 0;
            function imageChange() {
                var elements = $('.myLink');
                $('#currentImage').text(elements[nextImage].href);
                if (++nextImage >= elements.length) {
                    nextImage = 0;
                }               
                setTimeout(imageChange, 500);
            }
        </script>
    </head>
    <body>
        <a href="#link1.jpg" class="myLink">Link 1</a>
        <a href="#link2.jpg" class="myLink">Link 2</a>
        <a href="#link3.jpg" class="myLink">Link 3</a>
        <br>
        <span id="currentImage">..</span>
    </body>
</html>
person Felix    schedule 14.11.2012