. Advertisement .
..3..
. Advertisement .
..4..
There are various ways to create hover text in HTML and CSS. This post will introduce you to these methods and detailed steps.
What Is Hover Text?
A hover text is a building block searching for a piece on a part of the screen or the whole screen. It tends to move the mouse pointer in the location of the text.
This block is often used for hovering a menu item or a button. It is worth noting that it employs text recognition. Thus, it requires more processing power than image recognition. Working on a full screen takes several seconds to finish one.
How To Create Hover Text In HTML
You need to use the title attribute to add a text on hover. There are three elements to accomplish this:
Method 1: With The <div> Element
<!DOCTYPE html>
<html>
<head>
<title>How To Create Hover Text In HTML And CSS</title>
</head>
<body>
<h2>The Example</h2>
<div title="With The div Element"><b>Create Hover Text In HTML</b></div>
</body>
</html>Output:
......... ADVERTISEMENT .........
..8..
Method 2: With The <abbr> And <p> Elements
<!DOCTYPE html>
<html>
<head>
<title>How To Create Hover Text In HTML And CSS</title>
</head>
<body>
<h2>The Example</h2>
<abbr title="With The abbr And p Elements"><b>Create Hover Text In HTML</b></abbr>
<p title="Welcome to Ittuoria.net!"><i>Hover this text</i></p>
</body>
</html>
Output:
With <abbr> elements:
......... ADVERTISEMENT .........
..8..
And with <p> elements:
......... ADVERTISEMENT .........
..8..
Method 3: Use The :before Selector
This function can create and insert a pseudo-element before the selected element’s content. This way, you can add a hover text effect for your elements easily.
Before creating a hover text, it is vital to group all the display texts and the preferred hover text in one container element:
<body>
<span class="hovertext" data-hover="(text)">
Try hover over me
</span>
</body>
When running this code, you don’t have to use the title attribute like the first method. Instead, the code works to put the hover inside the data-hover attribute.
Now let’s add a CSS style to hide this text:
.hovertext {
position: relative;
border-bottom: 1px dotted black;
}
.hovertext:before {
content: attr(data-hover);
visibility: hidden;
opacity: 0;
width: 140px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
transition: opacity 1s ease-in-out;
position: absolute;
z-index: 1;
left: 0;
top: 110%;
}
.hovertext:hover:before {
opacity: 1;
visibility: visible;
}
How To Turn On And Turn Off Hover Text In MacOS?
Turning On Hover Text
Choose the Apple icon on the screen’s top left corner -> system references -> accessibility -> zoom -> check Enable Hover Text.
You can also choose Options to modify the Hover Text’s properties like activation key or font.
Turning Off Hover Text
The process is as simple as the turning on steps. Navigate to Apple icon -> System preferences -> accessibility -> zoom like above. Here, you should uncheck the Enable Hover Text box.
The boxes will not appear when you move your mouse over anything.
Conclusion
It is simple to create a hover text. Follow our methods mentioned above and you will successfully know how to create hover text in HTML and CSS.
Leave a comment