为什么我的 table 单元格（偶尔）不会表现出 'hover' 行为，直到我使用 Chrome 开发人员工具强制元素状态？

Why does my table cell (occasionally) not exhibit 'hover' behaviour until I force element state using Chrome Developer Tools?

我有一个 table，利用了以下 CSS 和 HTML：

.price { 
    position:relative; 
    display:block; 
    text-align:center; 
}

.detail { 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #333333; 
    min-width:200px; 
    width:auto; 
    height: 0; 
    overflow:hidden; 
    left: 0; 
    position: absolute; 
    -webkit-transition: all .3s ease;  
    -moz-transition: all .3s ease;  
    -ms-transition: all .3s ease;  
    -o-transition: all .3s ease;  
    transition: all .3s ease; 
} 


.price:hover > .detail, .price:hover > .notmuchdata > .detail {
    display:block;
    overflow:auto; 
    left:0px;
    width: 120px;
    height:60px;
    z-index:10;
}

<table>
    <tr>
        <td class="price" style="background-color:white;text-decoration: line-through">1.56
            <div class="detail">1.7% @ 1.6</div></td>
    </tr>
</table>

此代码的预期行为是，当用户将鼠标移到划掉的数值上时，会出现 div 以及更多数据。

在大多数情况下，此代码似乎完全按预期运行。但是，偶尔会有用户报告鼠标悬停没有效果 - div 没有出现。

很难成功复制问题。但是，有一次我能够打开 Chrome 开发人员工具并检查单元格。这次，我在单元格上使用 'Force Element State' 并将其设置为“:hover”。这样做之后，隐藏的 div 确实出现了。

所以我想我的一般问题是，为什么 :hover pseudo-class 不起作用（但只是偶尔）？在使用开发工具强制悬停状态时演示预期的行为？

编辑 1 为了使问题尽可能简洁明了，我没有包括页面在页面的另一个区域使用 AJAX 请求的额外细节。这些偶尔不会返回它们预期的纯 JSON，导致控制台上出现 javascript 错误。

很难说，因为我无法重现它，但我会首先删除所有非必要的 CSS 声明（并为删除线制作 class —— 尽管这可能不是问题所在):

.price { 
    text-align: center; 
}

.strike {
    background-color: white;
    text-decoration: line-through;
}

.detail { 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #333333; 
    min-width: 200px; /* <-- why min-width:200px here, but width: 120px on hover?  */
    height: 0; 
    overflow:hidden; 
    left: 0; 
    position: absolute; 
    -webkit-transition: all .3s ease;  
    -moz-transition: all .3s ease;  
    -ms-transition: all .3s ease;  
    -o-transition: all .3s ease;  
    transition: all .3s ease; 
} 


.price:hover .detail {
    width: 120px;
    height: 60px;
}

<table>
    <tr>
        <td class="price strike">1.56
            <div class="detail">1.7% @ 1.6</div></td>
    </tr>
</table>

我原来的问题

在我上面的原始问题中，为了清楚起见，我尽量简化了问题的细节。

更多详情

但是，我现在添加了 AJAX 在页面其他地方使用的事实。

我认为这可能是相关的，因为 'occasional' 问题的性质...

AJAX 请求用于调用 PHP 页面，该页面旨在发回纯 JSON，然后对其进行处理以在页面上显示图形。

通常这会正常工作，但偶尔会在此 php 页面上出现错误，并且 AJAX 请求发送的字符串包含一条警告信息。这导致 Chrome 开发人员工具的 'JavaScript Console' 部分出现一条错误消息（当然，图表未按应有的方式显示）。

我认为这种行为与我上面的问题无关，因为当我注意到它发生时，悬停似乎工作正常。也就是说，它似乎只影响了图表。

然而，正如我所说，这个问题的 'occasional' 性质让我怀疑是否存在某种联系。

原因？

我的理论是，当 JavaScript 代码遇到问题时（由于 AJAX 请求有时不返回纯 JSON），这反过来导致执行问题CSS 鼠标悬停在单元格上时本应激活的悬停行为。

采取的具体行动

所以我采取的行动如下：

  1. 我已将 error_reporting(E_ERROR); 添加到 php 文件的开头，该文件提供对 AJAX 请求的响应。这应该有望确保该文件只发回我的页面所期望的纯 JSON。

  2. 为了完整起见，我觉得我还应该提到我已经将 div 悬停 'mode' 时的 z-index 设置为大数字 (100)，尽管我怀疑这是否会有所作为。

它解决了问题吗？

如上所述，这个问题的 'hard to reproduce' 性质使得很难知道这个操作是否成功，但现在已经过去几天了，这个问题还没有再次报告。