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开发者工具并检查单元格。在这种情况下，我在单元格上使用了“强制元素状态”并将其设置为“：hover”。完成后，隐藏的div确实出现了。

所以我想我的一般问题是，为什么：hover伪类不起作用（但只是偶尔）？然后演示使用Dev Tools强制悬停状态时的预期行为？

编辑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>

Answer 2

我原来的问题

在我上面的原始问题中，为了清晰起见，我尽可能地简化了问题的细节。

原因？

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

采取的具体行动

所以我采取的行动如下：

我已将error_reporting(E_ERROR);添加到php文件的开头，该文件提供对AJAX请求的响应。这应该有希望确保文件只发回我的页面所期望的纯JSON。
为了完整起见，我觉得我还应该提一下，我在悬停模式下设置了z-index div＆＃39;尽管我怀疑这应该有所作为。

是否解决了问题？

如上所述，难以重现＆＃39;这个问题的本质使人们很难知道这个行动是否成功，但现在已经过了几天，而且问题还没有再次报道。

为什么我的表格单元格（偶尔）在使用Chrome开发者工具强制元素状态之前不会出现“悬停”行为？

2 个答案:

我原来的问题

更多细节

原因？

采取的具体行动

是否解决了问题？