这就是我的代码:
<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的高度.
当我在悬停时将高度从2px更改为5px时,我无法找到使.total扩展的方法.当我现在改变高度时,它会起作用,它会向下扩展3px并在鼠标离开时缩小3px.
我希望它扩大而不是下降.
有任何想法吗?
解决方法
要使用悬停,您必须这样做:
.total:hover {margin-top:-8px;
身高:5px;}
.total:hover {margin-top:-8px;
身高:5px;}
但是,您必须记住文档的正常流程是从上到下.要使较低级别的div向上扩展,您可能需要缩小其上方的元素.在大多数情况下,只有javascript才能完成.