On link :focus preview url (CSS only)
How do I make an on link :focus preview url (css only)?
When using the Tab key on a page to cycle through links, show a preview of the url (href attributes). Works with some clever :focus and :not() selectors and pseudo elements. Good idea for accessibility (?).. What is a on link :focus preview url (css only)? How do you make a on link :focus preview url (css only)? This script and codes were developed by Jelmer on 02 December 2022, Friday.
On link :focus preview url (CSS only) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>On link :focus preview url (CSS only)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Press tab to cycle through links</h1>
<p><em>Focus on this view first. Notice that the effect shouldn't work on clicks.</em></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat nihil, autem obcaecati accusamus officiis amet beatae possimus quam maiores laboriosam ipsa corporis repudiandae velit iure. In <a href="//google.com">velit</a> nostrum dolorem cupiditate repellendus, praesentium nam consequuntur odio <a href="//codepen.io/jelmerdemaat">voluptatem</a> voluptate! Magni, officia, hic.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis sequi dolorem voluptate neque deserunt tempore adipisci aliquam <a href="//twitter.com/jelmerdemaat">libero</a> est laborum fugiat illum perferendis accusamus maiores provident mollitia quidem aspernatur culpa, vel quis cum eaque delectus ipsa facilis eius. Facere odit quasi, aut quisquam! Id a doloremque laborum vitae, officia saepe quae, aut modi omnis, non <a href="//github.com/jelmerdemaat">sunt</a> quod accusantium sed natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis autem earum perferendis culpa quas dolorem quo veniam quia exercitationem, odio, adipisci incidunt pariatur, quam illum, provident cumque consequuntur fugiat praesentium <a href="//css-tricks.com">cupiditate</a> aliquam? Facere voluptates eligendi, vero expedita ullam dolor fugiat nobis impedit, qui, dignissimos odit quasi cum rerum adipisci quisquam.</p> <script src="js/index.js"></script>
</body>
</html>
On link :focus preview url (CSS only) - Script Codes CSS Codes
a { position: relative;
}
a:focus:not(:hover):not(:active) { outline: none; color: red;
}
a:focus:not(:hover):not(:active):after { display: block;
}
a:after { content: "Go to " attr(href); display: none; min-width: 100px; padding: 5px 10px; position: absolute; left: 0; top: 110%; color: white; background: rgba(0, 0, 0, 0.8); border-radius: 3px; white-space: nowrap;
}
body { max-width: 700px; margin: 60px auto; line-height: 1.5;
}
On link :focus preview url (CSS only) - Script Codes JS Codes
/*
When using the Tab key on a page to cycle through links, show a preview of the url (href attributes). Works with some clever :focus and :not() selectors and pseudo elements. Good idea for accessibility (?).
Selector idea from http://www.sitepoint.com/when-do-elements-take-the-focus/
*/
Developer | Jelmer |
Username | jelmerdemaat |
Uploaded | December 02, 2022 |
Rating | 4 |
Size | 4,023 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS only loading spinner | 2,086 Kb |
Test current page in Google PageSpeed | 1,909 Kb |
Responsive form design | 4,074 Kb |
Loading spinner moving bars | 2,025 Kb |
Simple responsive photo slider gallery | 3,558 Kb |
Ungrid with gutters | 1,644 Kb |
Justified divs, attempt 3 | 1,816 Kb |
Animated counter element | 3,412 Kb |
Check comment length to filter unuseful ones | 2,759 Kb |
CSS only slider | 3,131 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Fading text with CSS blend modes | Giana | 3,305 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
STIKHOI | Denmch | 7,122 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!