jquery - 同一类的每个实例都需要不同的图像

Question

我尝试搜索这个或类似的东西，但找不到可以使用的东西。我不是程序员，我是通过对现有代码进行逆向工程才走到这一步的。这似乎是一个常见的问题。我正在构建一个照片管理，一个小图像的马赛克。当用户将鼠标悬停时，我希望弹出一个较小的图像。我想使用一个类，因为会有数百个图像。 div 和 id 将无法工作，因为它会变得太大。所以，这是我的标记和 js。由于我是这里的新用户，它只允许我发布一个超链接而没有图像。但是会有多个<li>具有图像类“bigFoo”。我怎样才能让它对每个单独的“bigFoo”类起作用？任何建议都会很棒。

<script language="javascript" src="js/jquery-1.4.2.js"></script>

    <script type="text/javascript">

    function show_img(){
      $("document").ready(function() {
      $(".bigFoo") .css("visibility", "visible");
     });
     }

     function hide_img(){
     $("document").ready(function() {
      $(".bigFoo") .css("visibility", "hidden");
     });
     }
    <ul>
        <li><a href="javascript:void(0)" onMouseOver="show_img()" onMouseOut="hide_img()">
<image src="#littleA" /></a><image class="bigFoo" src="#bigA" /></li>

    </ul>

Answer 1

这是您正在寻找的基本理念吗？

jsfiddle example