如何在悬停时获得实际的DOM CSS宽度?

时间:2013-03-09 04:42:50

标签: css hover google-chrome-devtools

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

但我无法确定导致此移位的CSS样式元素是什么,因为我必须将鼠标悬停在链接上,并且无法扩展计算样式以查看导致此问题的原因。

我尝试使用标签和箭头键,这会让我通过Chrome的UI元素循环,但没有运气。有什么想法吗?

Chrome Developer Tools

BTW:菜单是由我在asp.net中包装的第三方工具创建的。这是受影响的已创建元素:

<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;
}

1 个答案:

答案 0 :(得分:1)

there are two answers for this question

样式窗格中的悬停复选框

hover checkbox in styles

和元素状态上下文菜单

and element state context menu