CSS3 implementiert den Mauszeiger, um erweiterten Inhalt anzuzeigen

In diesem Artikel wird der CSS3-Code zum Implementieren des Mauszeigers zum Anzeigen des zu erweiternden Inhalts vorgestellt. Wenn der Platz zu voll ist und Sie Inhalte ausblenden müssen, ist es besser, diese Funktion zu verwenden Ich habe Ihnen den spezifischen Implementierungscode gebracht, werfen wir einen Blick darauf

Wenn wir Navigationsbeschriftungen erstellen, ist der Platz manchmal zu voll und einige Inhalte müssen ausgeblendet werden. Deshalb habe ich hier einen Effekt geschrieben, der die Anzeige erweiterter Inhalte auf der Maus bewirkt Bewegen Sie den Mauszeiger, wie im Bild unten gezeigt.

Im Allgemeinen ist der Effekt relativ einfach zu erreichen, aber was noch problematischer ist, ist, dass der Dreiecksteil das Pseudoelement::after verwendet und übergeht - auf dem übergeordneten Element, wenn flow:hidden verwendet wird, werden auch Pseudoelemente ausgeblendet. Die endgültige Lösung besteht darin, den Text und die Symbole mit einem zu umschließen und dann das Überlaufattribut darauf festzulegen.

HTML-Code:

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

Das Symbol verwendet die von Font-Awesome bereitgestellte API. Importieren Sie einfach die CSS-Datei, wenn Sie es verwenden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS zum Erstellen grafischer Verformungs-Popup-Effekte

CSS3 und jQuery implementieren folgende Hover-Effekte die Mausrichtung

CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite

Das obige ist der detaillierte Inhalt vonCSS3 implementiert den Mauszeiger, um erweiterten Inhalt anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!