3

背景色とテキスト色を変更する、ホバー時に要素に単純なアニメーションが表示されるメニューがあります。

要素にはアウトセット スタイルの境界線があるため、インセットに変更して手前に見えるようにしたいと考えています。ただし、境界線スタイルのプロパティではトランジションが機能していないように見えるため、境界線スタイルの変更がすぐに行われ、後でのみ背景が変更されるため、最終的な効果はあまりよく見えません。

これを機能させる方法はありますか？border-style を移行できないのは奇妙だと思いました。もしそうなら、何か転機はありますか？

コードは次のとおりです。

#main_menu a, #main_menu li { 
  -webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
 } /*Hover animation */

#main_menu li:hover { background: #4488CC;  border-style: inset; }

#main_menu li {
        /*GRAPHICS*/
    list-style: none;
    border: 3px outset #496181;
    margin: 10px;
    background: #333;

PS：これにはjqueryを使いたくない

4

2 に答える 2

0

_あなたの質問は急いで書かれたかもしれませんが、最初のセレクターにa が欠けていると思います。border-styleまた、 from からoutsetまでアニメートしているようですoutsetので、違いはわかりません。それは実際に機能します.on jsfiddleborder-colorを変更するデモを作成しました.

于 2012-09-21T14:50:25.453 に答える
0

もう 1 つの解決策は、境界線をボタン イメージとして作成し、それを div で引き伸ばして、box-shadow を使用することです。そうすれば、ユーザーは影の遷移によって滑らかなボタンの動きを見ることができます。

于 2013-04-27T00:34:26.583 に答える