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

【问题标题】：Have multiple TD and onmouseover and onmouseout change bg color有多个 TD 和 onmouseover 和 onmouseout 改变 bg 颜色
【发布时间】：2012-06-23 23:04:02
【问题描述】：

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

但我希望它处于悬停状态。

谢谢

【问题讨论】：

标签： jquery hover

【解决方案1】：

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

【讨论】：

如果我想放两个，我可以说：$("#type1 #type22").mouseover(function(){
不这么认为。 $('#type1 #type22') 将转换为 id type22 后跟 id type1。如果您希望两个不同的 id 执行相同的鼠标悬停功能，则需要将该功能作为外部函数来调用。类似于： $("#type1").mouseover(function(){highlight()}); $("#type22").mouseover(function(){highlight()}); function highlight() { $("#type1").css("background-color", "red"); $("#type22").css("背景色", "红色"); } 查看更新的演示：jsfiddle.net/MqUyx
哦，好吧，我想走捷径。似乎没有那么幸运。谢谢您的帮助。你们两个！！！

【解决方案2】：

$('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

【讨论】：