CSS 도구 설명 소개(자세한 설명)-CSS 튜토리얼-php.cn

이 장에서는 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) 컨테이너 요소(예:

)를 사용하고 "tooltip"을 추가합니다. " 수업.

위로 마우스를 이동하면 툴팁이 표시됩니다.

인라인 요소(예: )에 도구 설명 텍스트를 넣고 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&#39;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:

CSS 도구 설명 소개(자세한 설명)