html - 为什么在我使用 Chrome 开发人员工具强制元素状态之前，我的表格单元格(偶尔)不会表现出 'hover' 行为？

Question

我有一个表格，使用了以下 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 伪类不起作用(但只是偶尔)？在使用开发工具强制悬停状态时演示预期的行为？

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

Answer 1

很难说，因为我无法重现它，但我将从消除所有非必要的 CSS 声明开始(并为删除线创建一个类——尽管这可能不是问题所在):

.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>