CSS3 は、展開されたコンテンツを表示するためのマウスホバーを実装します

この記事では、コンテンツを展開するためにマウスホバーを実装するための CSS3 コードを共有します。スペースが混雑しすぎてコンテンツの一部を非表示にする必要がある場合は、以下のエディターを使用することをお勧めします。具体的な実装コードを持ってきてくれたので、一緒に見てみましょう

私たち ナビゲーションラベルを作成するとき、スペースが混雑しすぎて一部のコンテンツを非表示にする必要がある場合があります。そこで、ここでは、に示すように、マウスホバーで展開されたコンテンツを表示するエフェクトを書きました。下の図。

一般的には比較的簡単に効果が得られますが、さらに厄介なのは三角部分に擬似要素::afterを使用しており、親要素にover-flow:hiddenを設定している場合です。 、擬似要素も非表示になります。最後の解決策は、テキストとアイコンを で囲み、それらに overflow 属性を設定することです。

HTML コード:

    <p id="nav">   
       <a id="nav-main"><span><i class="icon-home"></i> 主界面</span></a>   
         <a id="nav-sum"><span><i class="icon-laptop"></i> 统计界面</span></a>   
   </p>    
CSS代码：   
/*******************************************************************************/
/*********************************** nav **************************************/
/*******************************************************************************/
#nav{   
    box-sizing:border-box;   
    width:200px;   
    height:100%;   
    position:fixed;   
    padding-top:80px;   
}   
#nav a{   
    display:block;   
    width:30px;   
    height:52px;   
    position:relative;   
    margin-top:50px;   
}   
#nav a span{   
    display:inline-block;   
    width:46px;   
    height:50px;   
    font-size:1em;   
    font-weight:600;   
    color:rgba(255,255,255,0.9);   
    text-indent:3px;   
    line-height:52px;   
    cursor:pointer;   
    overflow:hidden;   
}   
#nav a span i{   
    font-size:1.3em;   
}   
#nav a::after{   
    content:&#39;&#39;;   
    display:block;   
    width:0;   
    height:0;   
    position:absolute;   
    rightright:-32px;   
    bottombottom:0;   
    border-top:26px solid transparent;   
    border-right:16px solid transparent;   
    border-bottom:26px solid transparent;   
}   
#nav-main{   
    background-color:rgb(211,83,80);   
}   
#nav-sum{   
    background-color:rgb(0,158,163);   
}   
#nav-main::after{   
    border-left:16px solid rgb(211,83,80);   
}   
#nav-sum::after{   
    border-left:16px solid rgb(0,158,163);   
}   
#nav a:hover{   
    -webkit-animation:extend-a 0.5s;   
    -moz-animation:extend-a 0.5s;   
    animation:extend-a 0.5s;   
    width:100px;   
}   
#nav a span:hover{   
    -webkit-animation:extend-span 0.5s;   
    -moz-animation:extend-span 0.5s;   
    animation:extend-span 0.5s;   
    width:116px;   
}   
/******************* a扩展效果 ******************/
@-webkit-keyframes extend-a{   
    0% {   
        width:30px;   
    }   
    100% {   
        width:100px;   
    }   
}   
@-moz-keyframes extend-a{   
    0% {   
        width:30px;   
    }   
    100% {   
        width:100px;   
    }   
}   
@keyframes extend-a{   
    0% {   
        width:30px;   
    }   
    100% {   
        width:100px;   
    }   
}   
/******************* span扩展效果 ******************/
@-webkit-keyframes extend-span{   
    0% {   
        width:46px;   
    }   
    100% {   
        width:116px;   
    }   
}   
@-moz-keyframes extend-span{   
    0% {   
        width:46px;   
    }   
    100% {   
        width:116px;   
    }   
}   
@keyframes extend-span{   
    0% {   
        width:46px;   
    }   
    100% {   
        width:116px;   
    }   
}

アイコンは font-awesome が提供する API を使用します。使用する場合は、CSS ファイルをインポートするだけです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項: グラフィック変形ポップアップ効果を作成するには

CSS

マウスの方向に従うホバー効果を実装するにはCSS3とjQuery

適応幅メニューボタン効果を実装するにはCSS

以上がCSS3 は、展開されたコンテンツを表示するためのマウスホバーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。