悬停不在桌子上工作

Question

我在表格中有5个td，当我将鼠标悬停在桌面上时，背景图片应该会改变。

目前，如果我将鼠标悬停在第1个或最后一个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>

以下是相关的CSS代码：

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

更新

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

完整代码（非常大）：http://jsfiddle.net/Rd2v4/

Answer 1

正如其他人所说，html和css对我也很好。

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

通过设置html

中的所有style，可以改善css

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

Answer 2

：hover是一个伪选择器，所有以：开头的东西都是这样的（例如：active，：before etc.）。

这可能与指定值混淆：

某物：价值; 因此，您需要将伪选择器视为单独的对象，而不是值。

这就是为什么你需要修复你的td：hover所以它看起来像td：hover。

请注意，如果你在td之后放一个空格，那么：

td :hover { ...

这等于：

td: *:hover { ...

因此将选择从td下降的所有项目并在悬停时应用样式（请参阅此示例）。

请记住，空格在CSS中有意义。