Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 애니메이션을 사용한 페이드 인 툴팁


CSS를 사용하여 툴팁 텍스트를 페이드 인하려면 다음 코드를 실행해 보십시오.

예시

 <스타일> .mytooltip .mytext { 가시성:숨김; 너비:140px; 배경색:파란색; 색상:#fff; z-인덱스:1; 상단:-5px; 오른쪽:110%; 텍스트 정렬:가운데; 테두리 반경:6px; 패딩:5px 0; 위치:절대; 불투명도:0; 전환:불투명도 1s; } .mytooltip { 위치:상대; 디스플레이:인라인 블록; 여백-왼쪽:150px; } .mytooltip .mytext:after { 내용:""; 위치:절대; 상단:50%; 왼쪽:100%; 여백 상단:-5px; 테두리 너비:6px; 테두리 스타일:솔리드; 테두리 색상:투명 투명 투명 파란색; } .mytooltip:hover .mytext { 가시성:가시성; 불투명도:1; }   
마우스 커서를 나 위에 두기 내 도구 설명 텍스트