0

いくつかのスクリーンショットで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>

アイデア？上記のリンクをロールオーバーすると、最後のリストが画像に置き換えられます。

クリス

4

1 に答える 1

4

jQueryの.hover（）メソッドを使用します。これにより、ユーザーがセレクターにカーソルを合わせたときに起動するメソッドを定義できます。また、hoverOutイベントハンドラーがあり、セレクターを離れるユーザーとしてアドレス指定するメソッドを定義します。

jqueryホバー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...
});
于 2012-12-05T03:10:26.713 に答える