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

您似乎使用 jQuery 。确保您已将其上传到您的服务器，并在HTML代码中链接到它，如下所示：

<script src="js/jquery-1.4.3.js"></script>

Answer 2

这是您正在寻找的基本想法吗？

jsfiddle example

Answer 3

JavaScript的：

jQuery(function($){ //best way to do document.ready

$('.hoverLink').mouseenter(function(e){
 $(this).find('.littleFoo').hide();
 $(this).find('.bigFoo').show();
});

$('.hoverLink').mouseleave(function(e){
  $(this).find('.littleFoo').show();
  $(this).find('.bigFoo').hide();
});

$('.hoverLink').click(false);

});

HTML：

  <ul>
    <li>
      <a class="hoverLink" href="#">
        <img class="littleFoo" src="#littleA" />
        <img class="bigFoo" src="#bigA" />
      </a>
    </li>
  </ul>

确保您使用的是有效的html元素。没有图片标记。
http://www.w3schools.com/tags/default.asp

编辑：
这种交互可以在CSS中完全完成，不需要JavaScript。

替代JavaScript：

jQuery(function($){ //best way to do document.ready

$('#hover-list li').mouseenter(function(e){
 $(this).find('img:eq(0)').hide();
 $(this).find('img:eq(1)').show();
});

$('#hover-list li').mouseleave(function(e){
  $(this).find('img:eq(0)').show();
  $(this).find('img:eq(1)').hide();
});

$('#hover-list li').click(false);

});

并且html更简单：

  <ul id="hover-list">
    <li>
      <a href="#">
        <img src="#littleA" alt="DONT FORGET YOUR ALT TEXT" />
        <img src="#bigA" alt="DONT FORGET YOUR ALT TEXT" />
      </a>
    </li>
  </ul>

实际上，除非你是手工编码，否则课程和id不应该那么大。

这里有一些带只有一个ID的CSS

#hover-list li img
{
  display: inline;
}

#hover-list li img + img
{
  display: none;
}

#hover-list li:hover img
{
  display: none;
}

#hover-list li:hover img + img
{
  display: inline;
}

需要与同一类的每个实例不同的图像

3 个答案: