Question

这就是我的代码：

<div class="progress">
    <div class="total">
        <span class="current"></span>
    </div>
</div>

以下是上述4个标签的CSS：

.progress
{
    margin-top: -5px;
    vertical-align: bottom;
    border-bottom: 1px solid #090605;
}

.total
{
    background-color: #221F1E;
    border-top: 1px solid #2F2F2F;
    height: 2px;
}
    .hover
    {
        margin-top: -8px;
        height: 5px;
    }

.current
{
    float: left;
    position: relative;
    top: -1px;
    height: 100%;
    color: blue;
}

我在悬停事件中操纵.total的高度。

当我在悬停时将高度从.total更改为2px时，我无法找到让5px展开的方法。当我现在改变高度时，它会起作用，它会向下扩展3px并在鼠标离开时缩小3px。

我希望它扩展向上而不是向下扩展。

有什么想法吗？

Answer 1

要使用悬停，您必须这样做：
.total:hover{margin-top: -8px; height: 5px;}

但是，您必须记住文档的正常流程是从上到下。要使较低级别的div向上扩展，您可能需要缩小其上方的元素。在大多数情况下，只有javascript才能完成。

Answer 2

你不能只相对于上层元素制作.total位置。当鼠标悬停时，您可以更改上边距

使用JQuery，您可以执行以下操作：

$(".total").hover(
  function () {
    $('.total').css('margin-top','-8px');
    $('.total').css('height','5px');
  }, 
  function () {
    $('.total').css('margin-top','0px');
    $('.total').css('height','2px');
  }

Answer 3

如果您只使用bottom属性，它也有效。这告诉底部开始的位置，使其保持固定在指定位置，并在需要时向上扩展。

Answer 4

也许尝试负值？ -5px

CSS：当高度改变时向上扩展div？

4 个答案: