CSS変更の高さ：ホバー

Question

ホバー上のアンカーの高さと位置を<a>に変更しようとしています。

私が使用しているCSSは次のとおりです。

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

 
    .options:hover { 
 
     height: 39px; 
 
\t \t top: -4px; 
 
    }

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

私が何か間違ったことしなければなりません。私は：top: -4px;と：ホバー部分を試して、これは動作しますが、height: 39px;は何もしません。 top、right、bottomとleft性質が位置relative、absoluteまたはfixedを適用する場合にのみ動作するため、

おかげ

Answer 1

もposition: relativeを追加します。

.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

ムハンマドウスマンの答えはうまく動作しますが、私は選択肢を提供したいと思います。

トップを置き換える場合、要素の「位置」プロパティおよび/または「トップ」プロパティに関係なく機能するtranslateY（-4px）で-4pxを置き換えます。
（例えば、「トップ」プロパティがパーセントであるか、JSによって動的に設定し、4つのピクセルでトップが何であるかに関係なく、それを移動したい場合に便利）

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

 
    .options:hover { 
 
     height: 39px; 
 
\t \t transform:translateY(-4px); 
 
    }

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