如何在悬停时获得实际的 DOM CSS 宽度？ [复制]答案

【问题标题】：How to get actual DOM CSS width on hover? [duplicate]如何在悬停时获得实际的 DOM CSS 宽度？ [复制]
【发布时间】：2013-02-24 18:41:41
【问题描述】：

当我必须将鼠标悬停以使事件发生时，如何展开以查看计算出的宽度？每当我将鼠标悬停在菜单中的链接上时，宽度就会从 270 像素更改为 850 像素，并使整个菜单失控。

但我无法确定是什么 CSS 样式元素导致了这种转变，因为我必须将鼠标悬停在链接上，并且无法展开计算的样式来查看导致这种转变的原因。

我尝试使用 tab 键和箭头键，认为这会让我循环浏览 Chrome 的 UI 元素，但没有运气。有什么想法吗？

顺便说一句：菜单是由我在 asp.net 中包装的第 3 方工具创建的。这是受到影响的已创建元素：

<td emtype="c" colspan="2" class="ParentItemContentCell"><a href="/Admin/Default.aspx?p=9">Admin Home</a></td>

下面是 CSS 代码，如果你想看的话：

.ParentItemContentCell
{
        width:100%;
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}
.ParentItemContentCellOver
{
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #361A53;
    text-align: center;
    white-space: nowrap;
    width:100%;
}

.ParentItemContentCellOver a
{
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #361A53;
    text-align: center;
    white-space: nowrap;
    width:100%;
    text-decoration:none;
}

【问题讨论】：

通过右键单击检查器 html 视图中的元素，您可以强制更改状态（:active、:hover 等）。然后，您可以使用它来进一步调试。此外，如果没有看到更多的 html 或指向您页面的链接，我们中的很多人将很难调试您的代码。

标签： css hover google-chrome-devtools

【解决方案1】：

there are two answers for this question

将复选框悬停在样式窗格中

和元素状态上下文菜单

【讨论】：