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... 
});