隐藏内容但响应 :hover

Question

我正在研究一种纯粹的 oocss 方法来创建 Windows 8 中的魅力。我已经完成了 Dock 类，但是在弄清楚当鼠标移到停靠点上时如何“扩展”魅力时遇到了问题区域。我知道有一些方法可以隐藏内容，但让浏览器响应 Charm 的 :hover 事件。如果您有任何想法，请告诉我。

码头

将内容停靠在屏幕边缘。

.dock 
{
    position:                       fixed;

    height:                         auto;

    width:                          auto;
}

.dock--top
{
    width:                          100%;

    top:                            0;
}

.dock--bottom
{
    width:                          100%;

    bottom:                         0;
}

.dock--left
{
    height:                         100%;

    width:                          auto;

    left:                           0;
}

.dock--right
{
    height:                         100%;

    right:                          0;
}

魅力

包含内容的岛屿。

.charm
{
    padding:                        24px;
}

.charm:hover
{

}

HTML

<div class="charm dock dock--right">


</div>

我尝试填充它并将宽度设置为 1px，但没有运气。在我最初的计划中，当移动移动到它上面时，我会应用背景颜色，这样它就不会在屏幕一侧呈现一条线。

这和我得到的一样接近，但它很丑：

.charm__body
{
    width:                           0;

    visibility:                      collapse;
}

.charm:hover
{
    background:                     blue;
}

.charm:hover .charm__body
{
    width:                          auto;

    visibility:                     visible;
}

Answer 1

您可以制作一个透明的 div，绝对定位，并将其用作悬停触发器。