Javascript 悬停在表td上不起作用

我的表中有5个

td

，当我将鼠标悬停在上面时，背景图像应该会改变

目前，如果我将鼠标悬停在第一个或最后一个

td

，背景图像会发生变化，但我不知道为什么这种悬停效果对其他

td

不起作用

以下是相关的HTML代码：

<div id="main" style="border-bottom-right-radius:0px;border-bottom-left-radius: 0px;" class="shell">
<table border="1" height="100%" width="100%" class="addtasks">
    <tr>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Past days<br/> <div id="past_days_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');" > Yesterday<br/> <div id="yesterday_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Today<br/> <div id="today_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Tomorrow<br/> <div id="tomarrow_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Next days<br/> <div id="next_days_itemdiv"> 10 </div></td>
    </tr>
</table>

.inboxtasks:hover
{   cursor: pointer;
    background-color: whitesmoke;
    font-size: 14px;
}
.inboxtasks{
    height:80px; 
}

更新：

<div id="main" style="border-bottom-right-radius:0px;border-bottom-left-radius: 0px;" class="shell">
<table border="1" height="100%" width="100%" class="addtasks">
    <tr>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Past days<br/> <div id="past_days_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');" > Yesterday<br/> <div id="yesterday_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Today<br/> <div id="today_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Tomorrow<br/> <div id="tomarrow_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Next days<br/> <div id="next_days_itemdiv"> 10 </div></td>
    </tr>
</table>

.inboxtasks:hover
{   cursor: pointer;
    background-color: whitesmoke;
    font-size: 14px;
}
.inboxtasks{
    height:80px; 
}

在一个简单的html页面中，它可以正常工作，但是我的应用程序很大，有很多html代码，我不知道这个问题的原因是什么

---

完整代码（非常大）：

正如其他人所说，你的

html

和

css

对我也很好

如果你的问题仍然存在。您可以尝试重新启动浏览器并清除

cookies/cache

您的

html

可以通过在

css

.inboxtasks:hover
{   cursor: pointer;
    background-color: whitesmoke;
    font-size: 14px;
    text-align: center;
}
.inboxtasks{
    height:80px; 
    width:20%;
    text-align: center;
}

---

：hover是一个伪选择器，以：开头的所有内容都是这样的（例如：active、：before等）

这可能与指定值相混淆：

一些东西：价值； 因此，您需要将伪选择器视为单独的对象，而不是值

这就是为什么需要修复td:hover，使其看起来像td:hover

请注意，如果您在td后面加上空格，则如下所示：

td :hover { ...

这等于：

td: *:hover { ...

因此，将选择从td开始的所有项目，并对其应用悬停样式（请参见此示例）

---

记住，空格在CSS中是有意义的

在这里它似乎工作得很好：代码都设置好了，对我来说也工作得很好。这可能是css没有正确上传的原因。！您需要进行基本的调试，隔离问题，以便发布实际复制的代码（除非您已经在该过程中找到了解决方案）。我们无法为您这样做，因为我们无法访问您的代码。您“[没有]足够的时间格式化整个html代码”，但希望我们为您调试它？如果没有标记，我永远不会编写css。。我更新了我的问题

：hover

是一个伪类，它本身就是一个（实）选择器<代码>:before和

：after

（正确地说

：before

和

：：after

）是psuedo元素。