javascript - 用于 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>

想法？我希望在滚动上述链接时将最后一个列表替换为图像。

克里斯

Answer 1

使用 jQuery 的 .hover() 方法。它允许您定义一个方法，该方法在用户将鼠标悬停在选择器上时触发。它还有一个 hoverOut 事件处理程序，您可以在其中定义一个方法来解决用户离开选择器的问题。

jquery hover api

这与您相关:

.hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)A function to execute when the mouse pointer enters the element. handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.

所以你应该做这样的事情:

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