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", "");
    });
});​

看看这个演示

更新 既然您问我如何使用两个不同的 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 回答