0 
<table border=0 cellPadding=5 cellSpacing=0 width=100%>
            <tr>
                <td colSpan=5 align=center><a href="index.html" title="Home"><img src="theImages/logoAlone.png" /></a></td>
            </tr>
            <tr>
                <td colSpan=5 height=15></td>
            </tr>
            <tr>
                <td width=18% class=fdBBorder id=type1><A href="findDoctors.html">Find A Doctor</a></td>
                <td width=18% class=fdBBorder id=type2><A href="patSvc.html">Patient Services</a></td>
                <td width=18% class=fdBBorder id=type3><A href="mapNDir.html">Maps & Directions</a></td>
                <td width=18% class=fdBBorder id=type4><A href="trainProgs.html">Training Programs</a></td>
                <td width=18% class=fdBBorder id=type5><A href="aboutUs.html">About Us</a></td>
            </tr>
            <tr>
                <td align=left valign=top id=type11>
                    <div class=mainP><img src="theImages/greenArrow.png" align=absmiddle /> <A href="findDoctors.html">Doctor's List</a></div>
                    <div class=mainP><img src="theImages/greenArrow.png" align=absmiddle /> <A href="findDoctors.html">Staff Highlight</a></div>
                </td>
            </tr>
            <tr>
                <td align=left valign=top id=type22>
                    <div class=mainP><img src="theImages/greenArrow.png" align=absmiddle /> <A href="findDoctors.html">Doctor's List</a></div>
                    <div class=mainP><img src="theImages/greenArrow.png" align=absmiddle /> <A href="findDoctors.html">Staff Highlight</a></div>
                </td>
            </tr>
        </table>

私の質問は、Find a Doctorにカーソルを合わせると、そのTDでbgColorとTD id type22のbgColorを変更したいのですが、type1にマウスオーバーすると、複数のTD背景色が大幅に変更されますか？そのためのjqueryを作成するにはどうすればよいですか？私はこれを持っていますが、これは色の負荷を変更しました：

$(document).ready(function(){
    $("#type1").css("background-color", "red");
    $("#type11").css("background-color", "red");
});

しかし、私はこれをホバーさせたいです。

ありがとう

4

2 に答える 2

0 
$('tr:eq(2) td[id^=type]').hover(function() {
    var id = this.id.replace(/type/, ''),
        targetId = id.concat(id);
    $('#type' + targetId).andSelf().css('background', 'red');
}, function() {
    var id = this.id.replace(/type/, ''),
        targetId = id.concat(id);
    $('#type' + targetId).andSelf().css('background', 'transparent');
})​;

デモ

于 2012-06-21T16:46:03.033 に答える
0

この同様の質問を見てください。あなたの解決策は次のようになります：

$(document).ready(function(){
   $("#type1").mouseover(function(){
      $("#type1").css("background-color", "red");
      $("#type22").css("background-color", "red");
   }).mouseout(function(){
      $("#type1").css("background-color", "");
      $("#type22").css("background-color", "");
    });
});​

このデモをチェックしてください

UPDATED 同じマウスオーバー機能を実行するために2つの異なるIDを使用する方法を私に尋ねたので。外部関数にする必要があります。何かのようなもの：

  $("#type1").mouseover(function(){highlight()});
  $("#type22").mouseover(function(){highlight()});
  function highlight() {
      $("#type1").css("background-color", "red");
      $("#type22").css("background-color", "red");
  }

ここでデモを見る

于 2012-06-21T16:47:12.750 に答える