使用Javascript滚动添加类

我想在图像的顶部添加一组类，这些类只在用户翻滚时出现

请将此作为工作示例：

（单击顶部的红色箭头）

您将注意到图像和文本的水平列表，所需的效果将列出所有图像，带有文本的黄色块将是滚动效果

CSS

<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt="">
    The London Police</a></li>
    <li><div class="project-thumb">
        <div class="content">
            <h2>The London Police</h2></a>
            <a class="view-project">View Project</a>
                </div><!--content END -->   
                    </div><!--project-thumb END --> 
                    </li></ul>

伦敦警方

伦敦警方
视图项目

请您就javascript替换效果的正确标记提供建议

---

非常感谢

我建议您使用像jQuery这样的javascript库。jQuery使在悬停事件上更改类变得异常容易

在

标记中添加jquery。使用谷歌CDN中的一个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

添加如下内容：

<script>
$(document).ready(function() {
  // find the image inside the link with the class project-thumb and add a hover event
  $("a.project-thumb img").hover(
    function () {
      // add a class to the closest li. $(this) is the image
      $(this).closest('li').addClass('theClassYouWantToAdd');
    }, 
    function () {
      $(this).closest('li').removeClass('theClassYouWantToRemove');
    }
  );
});
</script>

$（文档）.ready（函数（）{
//使用类项目thumb在链接中查找图像并添加悬停事件
$（“a.project-thumb img”）。悬停(
函数（）{
//将类添加到最近的li。$（此）是图像
$（this）.closest（'li'）.addClass（'theClassYouWantToAdd'）；
}, 
函数（）{
$（this）.closest（'li'）.removeClass（'theClassYouWantToRemove'）；
}
);
});

悬停事件的文档：

---

这应该行：）

当用户将鼠标悬停在图像上时，您应该使用.stop（），这样操作就不会排队。非常感谢这个Adam，非常清晰简洁，正是我想要的：）没问题。很乐意帮忙。：）