DIV顯示的翻轉JavaScript

Question

我正在嘗試爲幾個鏈接完成翻轉或熱飲，以顯示帶有幾個屏幕截圖的DIV。我應該怎麼寫這個腳本？

這裏是我的HTML

<section class="tabs-content"> 
     <table class="imagetable" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <th colspan="2" class="reportname">Exam Reports</th> 
    </tr> 
    <tr> 
     <td valign="top" class="formlabel" width="50%"><p><strong>For Faculty</strong><br /> 
     </p> 
     <ul> 
      <li><strong><a href="#">Exam Summary</a></strong><br /> 
      <em>Colorful and attractive end-of-exam report provides a clean summary from Learning Outcomes to At-Risk students<br /> 
      </em><br /> 
      </li> 
      <% if session("medical") = 1 then %> 
      <li><strong><a href="exams_category.asp">Category Analysis</a></strong><br /> 
      <em>Learning outcomes performance breakdown</em><br /> 
      <br /> 
      </li> 
      <% end if %> 
      <li><strong><a href="exams_itemanalysis.asp">Item/Question Analysis</a></strong><br /> 
      <em>Take an in-depth look at each item and its' performance</em><br /> 
<br /> 
      </li> 
      <li><strong><a href="exams_etresults.asp">List of Students Scores</a></strong><br /> 
      <em>Simple list of every exam takers performance…configurable</em></li> 
      </ul> 
     <p>&nbsp;</p> 
     <p><strong>For Students</strong><br /> 
     </p> 
     <ul> 
      <li><strong><a href="exams_release.asp">Release results directly to students</a></strong><br /> 
      <em>Make results available to students&hellip;configurable from simple to colorful</em></li> 
     </ul></td> 
     <td valign="top" class="formfield" width="50%"><p><strong>Misc Administrative Reports<br /> <!--this section will be hidden and an image placeholder will display the images from the above report links--> 
     </strong></p> 
     <ul> 
     <li><a href="exams_elapsedtime.asp">ET Elapsed Time</a></li> 
     <li><a href="exams_backwardnav.asp">Backward Navigation</a></li> 
     <li><a href="exams_unanswered.asp">Unanswered Essays</a></li> 
     <li><a href="exams_midexam.asp">Mid-Exam Restart</a></li> 
     <li><a href="exams_hardware.asp">Hardware Comparison</a></li> 
     <li><a href="exams_absentee.asp">Absentee Report</a></li> 
     <li><a href="exams_missingkeyword.asp">Missing Keywords</a></li> 
     </ul></td> 
     </tr> 
    </table> 
    </section> 

    </div> 
</div> 

想法？我想把最後一個列表替換爲以上鍊接的圖片。

Chris

Answer 1

使用jQuery的.hover（）方法。它允許您定義在用戶懸停在選擇器上時觸發的方法。它還有一個hoverOut事件處理程序，用於在用戶離開選擇器時定義要解決的方法。

jquery hover api

這將是相關的你：

.hover（handlerIn（eventObject）傳遞，handlerOut（eventObject）傳遞） handlerIn（eventObject）傳遞當鼠標指針進入執行以下步驟的功能元件。 handlerOut（eventObject）當鼠標指針離開元素時執行的函數。

所以你做前人的精力類似：

$('yourLinkSelector').hover(function(){ 
     //handle the user mouseover here.. 
     //remove last list 
     //show your screenshot div 
    }, function(){ 
     //handle the mouseout here.. 
     //do whatever div removal you need for the screenshot div 
     //show last list again... 
});