Question

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

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

我已将上述代码放在$（document）.ready（）中，但我看不到任何结果。但是这里有一些细微差别。如果我将以下功能分配给这些链接的“onmouseover”属性，我会显示警报;

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

全部包装：当我用鼠标鼠标悬停链接时，我可以看到图像在变化。但是如果我触发鼠标悬停事件，我就无法得到相同的结果。

Answer 1

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

jQuery doumentation说：

trigger（） - 执行附加到给定事件类型的匹配元素的所有处理程序和行为。

我不确定你要做什么，但是如果你只想循环某个类的链接，获取href并显示它指向的图像你可以做这样的事情：

下面是一段代码：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>

如何强制鼠标悬停在某个类的所有链接上

1 个答案: