纯Javascript表列悬停效果？

我需要一个纯Javascript（无jQuery）的HTML表列悬停效果

我发现它应该包含一个Firefox的补丁，但在我看来它仍然是坏的

我发现它只适用于第一列

不幸的是，我的Javascript技能充其量只是个业余爱好者，所以我试图修改其中任何一项都是徒劳的

---

这可能吗？如有任何建议，将不胜感激

我能想到的最好的方法是给每个

一个类名来标识它所在的列。i、 e.“col1、col2等”

然后，您可以使用

document.getElementsByCassName（“colX”）

函数获取这些

的数组，在数组中循环并修改样式。警告，这在没有GetElementsByCassName函数的旧浏览器中可能不起作用，但您可以很容易找到解决方法。最好是使用jQuery，但不知道为什么反对它。

试试看

<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">

---

这将起作用，不需要javascript。因此，即使人们关闭javascript，它也应该可以工作

Jfiddle：

​

Html:

这是您的代码（+）：

---

这里有一个基于列的方法。当鼠标进入/离开单元格时，找到相应的by索引并应用/删除所需的类：

（（）=>{
const myTable=document.getElementById（“myTable”）；
const cols=myTable.queryselectoral（“col”）；
常量事件={
鼠标悬停：e=>{
常数t=e.目标最近距离（“td”）；
if（t）{
常数cellIndex=t.cellIndex；
for（设i=0，n=cols.length；i{
常数t=e.target；
if（t.nodeName==“TD”&&&！t.contains（e.relatedTarget））{
cols[t.cellIndex].classList.remove（“悬停”）；
}
}
};
for（让事件进入事件）{
myTable.addEventListener（事件，事件[event]）；
}
})();
。悬停{
背景色：#FF0000；
}

可乐
可乐
可乐
可乐
可乐
嵌套
可乐
可乐
可乐
可乐
您可以在css中创建一个类

.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus { 
    background-color: #42C6F7;
}

然后从html中的表中调用它

<table class="table HoverTabla" id="tbl_Plan">

            <thead>
                <tr>
                    <th>Tipo de plan</th>
                    <th>Tiempo en días</th>
                    <th>Max. Usuario</th>
                    <th>Max. Capacidad</th>
                    <th>Max. Casos</th>
                    <th>Valor plan</th>
                    <th></th>
                </tr>
            </thead>
 </table>


提波德平面图
蒂恩波恩迪亚斯酒店
马克斯·乌萨里奥
最大己酸
马克斯·卡索斯
英勇计划
CSS我在谷歌上搜索了一下后发现的唯一答案：

表中的每个单元格（
）都通过伪元素进行了填充，用于创建悬停效果。为了确保悬停效果不会超出表本身，使用了
溢出：隐藏

文章中的子标题总结了这一切：“诀窍是在
上使用巨大的伪元素，被表溢出隐藏”
jQuery是用纯JavaScript编写的，这也算数吗-P你能用javascript添加css:hover属性吗？还是说这也是一个no-no属性？你不能只使用css吗？@IsaacGonzalez，据我所知，你只能在行和单元格上悬停，而不能在列上悬停。@Wiseguy你的用户名适合你。我想他想突出显示整个列，而不仅仅是单元格。这只适用于单元格，不适用于列。添加第二行，您将了解我的意思。将列中的每个单元格设为该类。HTML表格是在行中定义的，而不是列AFAIKCorrect，表格是在行中定义的，这就是为什么您需要使用js来捕获列中的每个单元格，以便对它们进行操作。确切地说，@invertdspear，我们的答案完全相同，只是我的答案没有使用js。您需要以任何一种方式将类添加到单元格中。是的，您确实需要将类添加到列中的每个单元格中，但是如果没有JS，您无法操作bgcolor或列中的每个单元格，这正是OP想要做的。这非常接近，但当我将鼠标完全移出桌子时，我停留在上面的最后一列似乎保留了背景色；我不是想忘恩负义！我没有意识到我需要在我的问题中具体说明这一点。谢谢提供您的功能。@vulpix，pfft。。。别担心。更新。非常感谢您的勤奋！非常感谢你。如果你不介意我问的话，你知道为什么当我把鼠标移到桌子上的图像上时，悬停消失了吗？因为当您将鼠标悬停在
td
的子对象上时，td
会发送一个
mouseout
事件，即：您的嵌套图像。您可以检查
e.toElement
是否是
td
的后代，如果是，则停止传播。工作正常。我现在正试图让它在我的代码中工作。谢谢@vulpix，一点也不。您可能希望解决旧浏览器的和/部分问题。
var HOVER_CLASS = 'hovered';
var hovered;

table.addEventListener('mouseover', function (e) {
    if (e.target.tagName.toLowerCase() == 'td') {
        var index = e.target.cellIndex;

        hovered && hovered.forEach(function (cell) {
            cell.classList.remove(HOVER_CLASS);
        });

        hovered = Array.prototype.map.call(
            table.rows,
            function (row) {
                var i = index;
                while (!cell && i >= 0) {
                    var cell = row.cells[i];
                    i -= 1;
                }
                return cell;
            }
        );

        hovered.forEach(function (cell) {
            cell.classList.add(HOVER_CLASS);
        });
    }
}, true);

table.addEventListener('mouseout', function (e) {
    hovered && hovered.forEach(function (cell) {
        cell.classList.remove(HOVER_CLASS);
    });
    hovered = null;
}, true);

.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus { 
    background-color: #42C6F7;
}

<table class="table HoverTabla" id="tbl_Plan">

            <thead>
                <tr>
                    <th>Tipo de plan</th>
                    <th>Tiempo en días</th>
                    <th>Max. Usuario</th>
                    <th>Max. Capacidad</th>
                    <th>Max. Casos</th>
                    <th>Valor plan</th>
                    <th></th>
                </tr>
            </thead>
 </table>