CSS改变高度:悬停

Question

我试图改变悬停锚<a>的高度和位置。

我使用的CSS是:

    .options {
	    background: linear-gradient(#FFFFFF, #dbe2e8);
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 115px;
		height: 35px;
		border: 1px solid black;
		border-bottom: none;
		border-radius: 8px 8px 0px 0px;
		-moz-border-radius: 8px 8px 0px 0px;
	}
    .options:hover {
        height: 39px;
		top: -4px;
    }

<a href="#" class="options"></a>

我一定是做错了什么。我已经尝试了:悬停部分只是top: -4px;和这工作，但height: 39px;什么也不做。

谢谢

Answer 1

添加position: relative，因为top, right, bottom和left属性仅在位置relative, absolute或fixed时起作用。

.options {
    background: linear-gradient(#FFFFFF, #dbe2e8);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 115px;
    height: 35px;
    border: 1px solid black;
    border-bottom: none;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    position: relative;
}
.options:hover {
    height: 39px;
    top: -4px;
}

<a href="#" class="options">Link</a>

Answer 2

虽然Muhammad Usman的答案很好，但我想提供另一种选择。

如果你用translateY(-4px)代替top:-4px，不管元素的"position"属性和/或"top"属性如何，它都可以工作。
(例如，如果"top"属性是一个百分比或由JS动态设置，并且无论顶部是什么，您都想将其移动4个像素)

.options {
	    background: linear-gradient(#FFFFFF, #dbe2e8);
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 115px;
		height: 35px;
		border: 1px solid black;
		border-bottom: none;
		border-radius: 8px 8px 0px 0px;
		-moz-border-radius: 8px 8px 0px 0px;
	}
    .options:hover {
        height: 39px;
		transform:translateY( -4px);
    }

<a href="#" class="options"></a>