Question

<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>

我的问题是，如果我将鼠标悬停在“寻找医生”上，我希望TD更改bgColor以及更改为TD ID类型22的bgColor，当你将鼠标悬停在type1上时，几乎会改变多个TD背景颜色？我如何为此创建一个jquery？我有这个，但这改变了颜色上载：

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

但我希望这可以悬停。

由于

Answer 1

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

<强> DEMO

Answer 2

请查看this similar question。您的解决方案将如下：

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

查看此demo

<强>已更新既然你问我如何使用两个不同的id来执行相同的鼠标悬停功能。你需要它作为一个外部功能。类似的东西：

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

请参阅demo here

有多个TD和onmouseover和onmouseout改变bg颜色

2 个答案: