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>

我一定是做错了。我已尝试使用{hover部分只使用top: -4px;，这样可行，但height: 39px;无效。

由于

Answer 1

添加position: relative也是因为top，right，bottom和left属性仅适用于位置relative，{{1 }或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;
}

Answer 2

虽然穆罕默德·乌斯曼的回答很好，但我想提供另一种选择。

如果用translateY（-4px）替换top：-4px，无论元素和/或“top”属性的“position”属性如何，它都将起作用。
（例如，如果“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>

CSS更改高度：悬停

2 个答案: