CSS만 사용하여 요소 위로 마우스를 가져가면 콘텐츠를 표시하는 3가지 방법

방법 1 : HTML 문서에서 제목 속성과 함께 dfn 태그 사용

HTML

<dfn title="dev.to">Dev</dfn> is a community of software developers getting together to help one another out.

dfn 태그 내의 텍스트(Here Dev)는 기본적으로 이탤릭체로 표시됩니다.
이 dfn 태그의 스타일을 요구 사항에 맞게 지정합니다.

CSS

dfn[title] {
    position: relative;
}
dfn[title]::after {
    content: attr(title);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
dfn[title]:hover::after {
    transform: scale(1);
}

방법 2 : 의사 요소 ::before 또는 ::after 사용

dev라는 단어 위에 텍스트를 표시합니다.

HTML

<span id="devDescribe">Dev</span> is a community of software developers getting together to help one another out.

우리는 이 순서를 사용할 것입니다 -
요소 --> 호버 시 --> 디스플레이 ::before/::after

CSS

#devDescribe:hover::before {
    content: "dev.to";
    background-color: #ff746b;
    color: #fff;
    position: absolute;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: 6px;
}

그런 다음 요구 사항에 따라 콘텐츠를 배치하십시오!

방법 3 : 요소에 data-* 속성 사용

HTML

<a  href="https://dev.to/"  data-explain="A community of software developers getting together to help one another out">Dev</a>

CSS

a[data-explain] {
    position: relative;
}
a[data-explain]::after {
    content: attr(data-explain);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
a[data-explain]:hover::after {
    transform: scale(1);
}

전체 시리즈를 확인하세요!
혜택을 받을 수 있는 사람과 공유하세요💚
❤️ 해피 코딩!
더 많은 것을 위해 따르십시오!