Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 14, 2022 03:44 am GMT

3 ways to display content on hovering over an element using only CSS

Method 1 : Using dfn Tag with the title attribute in HTML Document

HTML

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

The text(Here Dev) within the dfn tag will be in italic by default.
We will style this dfn tag to our requirements.

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);}

Method 2 : Using Pseudo Elements ::before or ::after

We will display a text over the word dev.

HTML

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

We will use this sequence -
element --> on hover --> display ::before/::after

CSS

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

And then position your content as per your requirements!

Method 3 : Using the attribute data-* for the element

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);}

Check out the whole series!
Share it with someone who may benefit from this
Happy Coding!
Follow for more!


Original Link: https://dev.to/koustav/3-ways-to-display-content-on-hovering-over-an-element-using-only-css-3d4m

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To