为jquery中的多个子项触发悬停状态的最有效方法

我有一个表格，第一个tr中第一个、第二个和第三个td的上边框在悬停相应td时需要改变颜色

我的限制是，我不能再使用类或ID，因为这些表格样式将被那些在编写代码方面几乎没有经验的人使用，他们只是在我们的cms中选择一个表格，然后向其中添加一个类和ID

我已经编写了代码（请参见下面的代码片段），但我希望为下面的子对象尽可能高效地编写代码

我可以这样做：

$（“#表1 td:n子项（1）”）。悬停（函数（）{
$（“#table 1.table-equal-compare-3 tr:nth child（1）td:nth child（1）”）.addClass（“表比较边框悬停”）；
}，函数（）{
$（“#table 1.table-equal-compare-3 tr:n个孩子（1）td:n个孩子（1）”）.removeClass（“table-compare-border悬停”）；
});
$（“#表1 td:n子项（2）”）.hover（函数（）{
$（“#table 1.table-equal-compare-3 tr:nth child（1）td:nth child（2）”）.addClass（“表比较边框悬停”）；
}，函数（）{
$（“#table 1.table-equal-compare-3 tr:n个孩子（1）td:n个孩子（2）”）.removeClass（“table-compare-border悬停”）；
});
$（“#表1 td:n子项（3）”）.hover（函数（）{
$（“#table 1.table-equal-compare-3 tr:nth child（1）td:nth child（3）”）.addClass（“表比较边框悬停”）；
}，函数（）{
$（“#table 1.table-equal-compare-3 tr:n个孩子（1）td:n个孩子（3）”）.removeClass（“table-compare-border悬停”）；
});无需使用Javascript。简单的CSS会帮你做到这一点


表tr:first child>td:hover{
背景色：红色；
颜色：白色；
}

Axitour AXIWI REF-001
Axitour AXIWI REF-002
Axitour AXIWI REF-004
2个Zenders（AXIWI AT-320 LD）
2个运动耳机
运输费

3个Zenders（AXIWI AT-320 LD）
3个运动耳机
•运输费

5个Zenders（AXIWI AT-320 LD）
5个运动耳机
运输费

我将使用
index（）
获取行中当前单元格的索引，然后使用该索引在第一行添加和删除类：


var table=$（'.table-equal-compare-3'），
firstRowTDs=table.find（'tr'）.eq（0）.children（）；//缓存第一行tds以获得更好的性能
table.find（'td'）.hover（函数（）{
var index=$（this.index（）；
如果（索引<3）{//只对前三列执行此操作
第一排
.removeClass（'hovered'）//删除所有类
.eq（index）//获取与悬停元素的索引匹配的项
.addClass（'悬停'）；//添加上边框
}
}, 
函数（）{
firstRowTDs.removeClass（'悬停'）；//删除上边框
});
.table-equal-compare-3 tr:n第n个子项（1）{
边框顶部：实心2px#e6；
}
表3.1-equal-compare-3 td{
文本对齐：居中；
填充：8px；
垂直对齐：底部对齐；
填充顶部：10px；
}
表3.1-equal-compare-3 tr：第一个孩子td{
边框顶部：实心2倍透明；
-webkit过渡：边框顶部颜色500ms线性；
-ms过渡：边框顶部颜色500ms线性；
过渡：边框顶部颜色500ms线性；
}
table.table-equal-compare-3 tr：第一个子td悬停{
边框颜色：#000；
}

Axitour AXIWI REF-001
Axitour AXIWI REF-002
Axitour AXIWI REF-003
Axitour AXIWI REF-004
2个Zenders（AXIWI AT-320 LD）
2个运动耳机
运输费

3个Zenders（AXIWI AT-320 LD）
3个运动耳机
•运输费

5个Zenders（AXIWI AT-320 LD）
5个运动耳机
运输费

顶部没有悬停的额外列
您可以使用更合适的CSS选择器。以下是纯CSS3选择器：

td:nth-child(-n + 3)

。。。匹配父元素的第一、第二和第三个子元素的所有
td
元素。您的代码可以简化如下：


$（“#表1 td:n子项（-n+3）”）。悬停（函数（）{
var n=$（this.index（）+1；
$（“#table1 tr:n子项（1）td:n子项（+n+））.addClass（“表比较边框悬停”）；
}，函数（）{
var n=$（this.index（）+1；
$（“#table1 tr:n子项（1）td:n子项（“+n+”））.removeClass（“表比较边框悬停”）；
});
.table-equal-compare-3 td{
边框顶部：实心2倍透明；
过渡：边框顶部颜色500ms线性；
填充：10px 20px；
}
td.table-compare-border-hover{
边框顶部颜色：#000000；
}

标签1
标签2
标签3
标签4
值1
价值2
价值3
价值4
您使用
表格进行此操作是否有特定原因？通过正确地使用
div
元素和CSS
：hover
选择器，似乎可以更简单地解决这个问题。您硬编码的
•
字符也非常奇怪。使用
和
元素这将是一个简单的解决方案，问题是我们现有的所有页面都使用表格，它们可以由我们的cms（wysiwyg）自动生成。使用div意味着将要制作这些页面的人（文案撰写人）需要编辑源代码，而他们不能也不会为此付费。不是所有的tds，只有第一个tr中的前三个td。你只有三个tdsMy很糟糕，代码不完整，将会有更多的td。是的，但只有在将td本身悬停时，悬停需要在整个列上触发。我没说对