집 > 기사 > 웹 프론트엔드 > CSS3는 확장된 콘텐츠를 표시하기 위해 마우스 호버를 구현합니다.

CSS3는 확장된 콘텐츠를 표시하기 위해 마우스 호버를 구현합니다.

不言원래의: 2018-06-26 10:33:312602검색

이 글에서는 확장할 콘텐츠를 표시하기 위해 마우스 호버를 구현하는 CSS3 코드를 공유합니다. 공간이 너무 많아 콘텐츠의 일부를 숨겨야 할 경우 아래 편집기를 사용하는 것이 좋습니다. 구체적인 구현 코드를 가져왔으니 함께 살펴볼까요

We 내비게이션 라벨을 만들 때 가끔 공간이 너무 혼잡해서 일부 내용을 숨겨야 할 때가 있어서, 여기서는 마우스를 올리면 확장된 내용이 표시되는 효과를 다음과 같이 작성했습니다. 아래 그림.

일반적으로 효과는 비교적 쉽게 얻을 수 있지만 더 문제가 되는 것은 삼각형 부분에 의사 요소 ::after를 사용하고, 상위 요소에over-flow:hidden을 설정하는 경우입니다. , 의사 요소도 숨겨집니다. 최종 해결책은 텍스트와 아이콘을 45a2772a6b6107b401db3c9b82c049c2으로 묶은 다음 오버플로 속성을 설정하는 것입니다.

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 중국어 홈페이지를 주목해주세요!

CSS3는 확장된 콘텐츠를 표시하기 위해 마우스 호버를 구현합니다.

관련 기사