Question

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

基座

将内容寄存到屏幕边缘。

.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，并使其作为悬停触发器。

隐藏内容但响应：悬停

1 个答案: