집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩에서 페이지를 상단 호버 프롬프트로 다시 설정하는 방법

부트스트랩에서 페이지를 상단 호버 프롬프트로 다시 설정하는 방법

尚원래의: 2019-07-27 16:12:354878검색

부트스트랩 설정 페이지에서 상단 호버 프롬프트로 돌아가는 방법은 다음과 같습니다.

1. 먼저 본문에 "맨 위로 돌아가기" 버튼을 추가하세요

<body>
<div class="go-top">
<div class="arrow"></div>
<div class="stick"></div>
</div>
</body>

2. 버튼이 항상 오른쪽 하단에 표시되도록 위치를 고정했습니다. left:90%를 설정하면 버튼이 스크롤 막대에 너무 가깝지 않고 오른쪽에 표시될 수 있습니다.

3. 페이지가 특정 높이로 스크롤되면 버튼이 기본적으로 표시되지 않습니다.

div .go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}
div .go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div .go-top div .arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}
div .go-top div .stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

권장:

부트스트랩 소개 튜토리얼

위 내용은 부트스트랩에서 페이지를 상단 호버 프롬프트로 다시 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：부트스트랩이 브라우저 호환성을 해결하는 방법다음 기사：부트스트랩이 브라우저 호환성을 해결하는 방법