在网页上总是看到这样的效果：将鼠标放到一个小格子里，小格子变暗，同时显示出来一些文字。一直比较好奇，今天我也简单的实现了一下，如果有不对或者更好的方法，请指教。

总体思路是，构建一个新的div，用来覆盖图片并显示字，鼠标移动到img上时即可显示div，移出img时div会消失。

1、构建基本页面：

<div id="ten_model">
  <ul id="little_imgs">
    <li id="li1"><img src="" height="120" width="120"></li>
    <li id="li2"><img src="" height="120" width="120"></li>
    <li id="li3"><img src="" height="120" width="120"></li>
    <li id="li4"><img src="" height="120" width="120"></li>
    <li id="li5"><img src="" height="120" width="120"></li>
    <li id="li6"><img src="" height="120" width="120"></li>
    <li id="li7"><img src="" height="120" width="120"></li>
    <li id="li8"><img src="" height="120" width="120"></li>
    <li id="li9"><img src="" height="120" width="120"></li>
    <li id="li0"><img src="" height="120" width="120"></li>
  </ul>
</div>

以上是十个基本的图片的HTML代码，放到一个ul里面。

 1 ul#little_imgs {
 2   list-style: none;
 3   position: relative;
 4   width: 300px;
 5   height: auto;
 6 }
 7 
 8 ul#little_imgs li {
 9   width: 120px;
10   height: 120px;
11   float: left;
12   margin: 3px;
13 }

 

以上是对于ul和li的css修饰，让其每两个一行，一共五行两列。

<div id="show_model">
　<p></p>
</div>

　   

div#show_model {
  width: 120px;
  height: 120px;
  background-color: black;
  opacity: .7;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

以上是鼠标移动到每个li上时，li上面显示的div，目的是有变暗效果（通过opacity实现）和文字显示（<p></p>）。

2、添加JavaScript效果：

    $("#little_imgs li").mouseover(function(){
      var ll = $(this).offset().left;
      var tt = $(this).offset().top;
      $("#show_model").css("left",ll-2);
      $("#show_model").css("top",tt-2);
      
      var li_id = $(this).attr("id");
      if(li_id == 'li1'){
          $("#show_model p").html("L");
      }else if(li_id == 'li2'){
          $("#show_model p").html("o");
      }else if(li_id == 'li3'){
          $("#show_model p").html("A");
      }else if(li_id == 'li4'){
          $("#show_model p").html("B");
      }else if(li_id == 'li5'){
          $("#show_model p").html("N");
      }else if(li_id == 'li6'){
          $("#show_model p").html("Li");
      }else if(li_id == 'li7'){
          $("#show_model p").html("D");
      }else if(li_id == 'li8'){
          $("#show_model p").html("Na");
      }else if(li_id == 'li9'){
          $("#show_model p").html("Ra");
      }else if(li_id == 'li0'){
          $("#show_model p").html("RB");
      }

    $("#show_model").css("display","block");
    });
    
    $("#show_model").mouseover(function(){
      $(this).css("display","block");
    });
    
    $("#show_model").mouseout(function(){
      $(this).css("display","none");
    });
    
    $("#ten_model").mouseout(function(){
      $("#show_model").css("display","none");
    });

　　利用jQuery，当鼠标移动到每一个li上时，获取li的top和height，并赋值给show_model，并给show_model的p赋值文字，让其显示出来，出现的问题就是最开始上面的覆盖层会不停地闪，后来分析发现：当鼠标移动到li上时，会显示出show_model的div但是此时鼠标已经离开了li，因此show_model的div会消失，一旦消失，鼠标又落在了li上，因此show_model的div又会显示出来，如此往复。解决的办法是将show_model的div加上mouseover事件，当在其上时，div不会消失。

     场景基本实现，如果要给img图片添加click事件，因为有div的阻挡，会有影响，解决的方法是：将click事件分成两部分，mousedown时让div消失，mouseup时添加img图片本来的click事件即可。