CSS3 implémente le survol de la souris pour afficher le contenu étendu

Cet article partagera avec vous le code CSS3 pour implémenter le survol de la souris pour afficher le contenu à développer. Lorsque l'espace est trop encombré et que vous devez masquer du contenu, il est préférable d'utiliser cette fonction. apporté le code d'implémentation spécifique, jetons un coup d'oeil

Lorsque nous créons des étiquettes de navigation, parfois l'espace est trop encombré et certains contenus doivent être masqués, j'ai donc écrit ici un effet d'affichage du contenu développé au survol de la souris , comme le montre la figure ci-dessous.

D'une manière générale, l'effet est relativement facile à obtenir, mais ce qui est plus gênant, c'est que la partie triangulaire utilise le pseudo élément :: after et se remet en place. - sur l'élément parent Lorsque flow:hidden est utilisé, les pseudo-éléments seront également masqués. La solution finale consiste à envelopper le texte et les icônes avec 45a2772a6b6107b401db3c9b82c049c2, puis à définir l'attribut de débordement.

Code 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;   
    }   
}

L'icône utilise l'API fournie par font-awesome. Il suffit d'importer son fichier css lors de son utilisation.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

CSS pour créer des effets pop-up de déformation graphique

CSS3 et jQuery implémentent les effets Hover qui suivent la direction de la souris

CSS implémente l'effet de bouton de menu à largeur adaptative

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!