Touch Hover
How do I make an touch hover?
An example of adding active touch/mouse checking (super helpful for touch-enabled PCs). Also, shows an example of creating a Sass mixin to act as a selector for :hover/:active in cases of mouse/touch input.. What is a touch hover? How do you make a touch hover? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
Touch Hover - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Touch Hover</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <a class="button" href="#">Hover / Touch</a> <script src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Touch Hover - Script Codes CSS Codes
.button { position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-sizing: border-box; display: inline-block; padding: 1rem; background: #66f; color: #fff; border: solid 2px #66f; text-decoration: none; -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s; -webkit-tap-highlight-color: transparent;
}
.mouse .button:hover, .touch .button:active { background: #fff; color: #66f;
}
html, body { width: 100%; height: 100%; padding: 0; overflow: hidden;
}
Touch Hover - Script Codes JS Codes
var isTouching = false;
window.addEventListener('touchstart', function(){ document.documentElement.classList.remove('mouse'); document.documentElement.classList.add('touch'); isTouching = true;
});
window.addEventListener('mousemove', function(){ if(isTouching) isTouching = false else { document.documentElement.classList.remove('touch'); document.documentElement.classList.add('mouse'); }
});
FastClick.attach(document.body);
Developer | Aaron Levine |
Username | Aldlevine |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,764 Kb |
Views | 10,120 |
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 |
Popup Modal | 3,696 Kb |
Colorful Slider Graph | 5,199 Kb |
Kaskade 0.3 - Desktop Demo | 9,186 Kb |
Price is Right Wheel - Better Inertia | 5,730 Kb |
Sliding Single Select | 3,968 Kb |
Random Gradients - JS | 2,026 Kb |
Faceful Cubes | 3,721 Kb |
Mobile App Design | 9,243 Kb |
Colored Rain | 3,190 Kb |
Nav-Bar and Tab-Bar Layout | 3,936 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 |
Twitch TV | Natester13 | 4,488 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Tooltip in table | Roine | 3,713 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!