Question

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

请将此视为一个工作示例：

http://www.warface.co.uk/clients/warface.co.uk/ （点击顶部的红色箭头）

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

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替换效果的正确标记提出建议。

非常感谢

Answer 1

我建议你使用像jQuery这样的javascript库。 jQuery使得在悬停事件上进行类更改非常容易。

在<head>标记中添加jquery。使用googles 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>

悬停事件的文档：http://api.jquery.com/hover/

这应该有效：）

使用Javascript翻转添加类

1 个答案: