1

我的页面上有一定数量的链接。每个链接的 Href 属性与一个图像相关联。因此，当我将鼠标悬停在特定链接上时，会显示相应的图像。我想让这个过程自动化，以便链接一个接一个地悬停鼠标 5 秒。我试过这个但它不起作用：

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

我已将上述代码放入 $(document).ready() 中，但看不到任何结果。但是这里有一点细微差别。如果我将以下函数分配给这些链接的“onmouseover”属性，则会显示警报；

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

总结这一切：当我用鼠标将鼠标悬停在链接上时，我可以看到图像发生了变化。但是，如果我触发 mouseover 事件，我将无法获得相同的结果。

4

1 回答 1

1

嗯看起来触发器只是调用您设置的处理程序（在您的示例中显示警报）。它没有设置 :hover css 样式。

jQuery doumentation 说：

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>
于 2012-11-14T14:37:22.027 回答