CSS 도구 설명 소개(자세한 설명)
Sep 14, 2018 pm 05:53 PM이 장에서는 CSS 도구 설명에 대한 소개(자세한 설명)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
프롬프트 도구는 마우스가 지정된 요소로 이동한 후 실행되며 머리 표시, 오른쪽 표시, 왼쪽 표시, 하단 표시의 네 가지 방향으로 표시될 수 있습니다.
1. 기본 툴팁
지정된 요소로 마우스를 이동하면 툴팁이 표시됩니다.
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}예제 분석
HTML) 컨테이너 요소(예:
인라인 요소(예: )에 도구 설명 텍스트를 넣고 class="tooltiptext"를 사용하세요.
CSS) 툴팁 클래스는 위치:상대적을 사용하며 프롬프트 텍스트는 위치 지정 값 위치:절대를 설정해야 합니다. 참고: 다음 예에서는 더 많은 위치 지정 효과를 보여줍니다.
tooltiptext 클래스는 실제 도구 설명 텍스트에 사용됩니다. 모달은 숨겨져 있으며 요소 위로 마우스를 이동할 때 나타납니다. 일부 너비, 배경색, 글꼴 색상 및 기타 스타일이 설정됩니다.
CSS3 border-radius 속성은 프롬프트 상자에 둥근 모서리를 추가하는 데 사용됩니다.
:호버 선택기는 마우스가 지정된 요소
2. 위치 지정 도구
다음 예에서는 도구가 지정된 요소의 오른쪽(왼쪽: 105%)에 표시됩니다.
top:-5px는 컨테이너 요소 중앙에 위치하는 것과 동일합니다. 툴팁 텍스트의 위쪽 및 아래쪽 패딩이 5px이므로 숫자 5를 사용합니다.
패딩 값을 수정하는 경우 중앙에 위치하도록 위쪽 값도 이에 맞게 수정되어야 합니다.
왼쪽에 프롬프트 상자가 표시되는 경우에도 마찬가지입니다.
오른쪽에 표시:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}왼쪽에 표시:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}헤더와 하단에 도구 설명을 표시하려는 경우. margin-left 속성을 사용하고 이를 -60px로 설정해야 합니다. 이 숫자는 중앙 정렬에 너비의 절반, 즉 너비/2(120/2 = 60)를 사용하여 나온 것입니다.
머리에 표시:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}하단에 표시:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}3. 화살표 추가
CSS pseudo-element::after 및 콘텐츠 속성을 사용하여 작은 화살표를 만들 수 있습니다. 툴팁 로고와 화살표는 테두리로 구성되어 있지만 결합하면 프롬프트 툴은 음성 메시지 상자처럼 보입니다.
다음 예는 상단에 표시되는 툴팁에 아래쪽 화살표를 추가하는 방법을 보여줍니다.
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}예제 분석
툴팁 내에 화살표 위치 지정: top: 100% 화살표는 툴팁 하단에 표시됩니다. . 왼쪽: 50%는 화살표를 중앙 정렬하는 데 사용됩니다.
참고: border-width 속성은 화살표의 크기를 지정합니다. 수정하는 경우 margin-left 값도 수정하세요. 이렇게 하면 화살표가 중앙에 표시될 수 있습니다.
border-color는 콘텐츠를 화살표로 변환하는 데 사용됩니다. 위쪽 테두리를 검은색으로 설정하고 나머지는 투명하게 설정합니다. 다른 설정도 검은색인 경우에는 검은색 사각형으로 표시됩니다.
다음 예는 도구 설명의 머리 부분에 화살표를 추가하는 방법을 보여줍니다. 테두리 색상 설정에 주의하세요.
하단 팁 상자/상단 화살표:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具头部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}다음 두 예는 도구 설명의 화살표 예입니다. 왼쪽 및 오른쪽:
오른쪽 프롬프트 상자/왼쪽 화살표:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}왼쪽 프롬프트 상자/오른쪽 화살표:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 提示工具右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}4. 페이드 인 효과
CSS3 전환 속성을 사용할 수 있으며 프롬프트 도구를 구현하기 위한 opacity 속성 페이드 인 효과:
왼쪽 프롬프트 상자/오른쪽 화살표:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}5. 코드 예:
.wrapper {
text-transform: uppercase;
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 20px;
margin: 100px 75px 10px 75px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}
.lte8 .wrapper:hover .tooltip {
display: block;
}Rendering:
 "153691878345158CSS 도구 설명 소개(자세한 설명)")
위 내용은 CSS 도구 설명 소개(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7306
9
1623
14
1344
46
1259
25
1207
29
