2

上司は、メニューを変更するように求めています。メニューは画像で作成されていましたが、CSS を使用してボタンを作成するように求められています。ボタンを作成しましたが、画像のようにマウスオーバーで変更する必要があります。

普通 マウスオーバー時

今、私は実際にはデザイナーではなく、サーバー側の作業をしているのですが、これを行う必要があります..私が作成したボタンのコードは次のとおりです。

a { 
    text-transform:none;
    color:#F1EFED;
    padding:10px;
    background-color: #84c225;
}

どうすればこの効果を得ることができますか?

4

2 に答える 2

5 
a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
}
a:hover {
    padding-bottom: 4px;
    border-bottom: 6px solid #97e127;
}

http://jsfiddle.net/jTC9C/1/

仕組み:

ホバーすると、適用する境界線のサイズだけ padding-bottom (ピクセル単位) を減らします。

ボーナス - トランジション

border-bottom-widthCSS3 トランジションを追加する場合は、複合宣言をアニメーション化できないため、境界線の定義を分割し、代わりに使用する必要があります。

a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
    transition: all 0.3s;
    border-bottom: 0px solid #97e127;
}
a:hover {
    padding-bottom: 4px;
    border-bottom-width: 6px;
}

http://jsfiddle.net/jTC9C/2/

于 2013-07-16T09:03:16.253 に答える
5 
a:hover{
  box-shadow: inset 0 -5px 0 0 lightgreen
}

デモ: http://jsfiddle.net/xPHCd/

他のブラウザー固有のルールも追加する必要があります (例: -moz-box-shadow)。

于 2013-07-16T09:04:08.287 に答える