Css: hover, touchscreen and single page apps
I am making a Single Page Application with HTML, CSS and Javascript (no jQuery or similar). This app is made up of many UI pages that can be changed via Javascript. The UI works fine with mice on computers, but not so good with touchscreens (mobile, etc.).
There are many buttons with CSS hover graphic effect. If I change the page with a single touch on the touchscreen, the pointer stays there, forcing the CSS hover to the next elements appearing at the same position when the page is "changed". This effect is very annoying, but I can't figure out how to fix it.
The code is very simple:
CSS
button {
background-color: #XXXXXX;
}
button:hover {
background-color: #ZZZZZZ;
}
Html
<button onclick="changepage()"></button>
source to share
You can use modernizr with touch event detection than use
html.no-touch button:hover {
background-color: #ZZZZZZ;
}
Without modernizr, you can add this simple code to add no-touch / touch class to html tag
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].className += ' touch';
}else{
document.getElementsByTagName('html')[0].className += ' no-touch';
}
</script>
source to share
Thank you anyway! Finally, I made a very simple script that works great ... it's fine even for touch computers that have a mouse (like mine) and of course mobile phones. No need to discover devices! The solution is to add a very small div below the cursor after changing the page by calling refresh_hover (). This 1px x 1px div is removed as soon as the user clicks on it, or the cursor leaves it. This way, the hover effect is removed when the content changes behind the pointer, but then restored when the user does something! You might think this is very silly, but simple and works really well!
Here he is:
function refresh_hover(){
if(!event){
return false;
}
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('mouse_div');
if(!div){
document.body.innerHTML=document.body.innerHTML
+'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>';
div = document.getElementById('mouse_div');
}
div.style.display='block';
div.style.top=y+'px';
div.style.left=x+'px'
}
source to share