鼠標移動到圖片上，顯示相關信息

在網頁上老是看到這樣的效果：將鼠標放到一個小格子裏，小格子變暗，同時顯示出來一些文字。一直比較好奇，今天我也簡單的實現了一下，若是有不對或者更好的方法，請指教。

整體思路是，構建一個新的div，用來覆蓋圖片並顯示字，鼠標移動到img上時便可顯示div，移出img時div會消失。

一、構建基本頁面：

<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>）。

二、添加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事件便可。