In pure JavaScript, How can I disable the hover effect (of a div or btn ...etc) when user's touch end in touchable devices?
I have some anchors and buttons with effects on hovering, but on touch devices the effect of touch remains visible even after the user takes his finger off the screen.
I don't want the hover effect to be completely removed from touch devices... but what I want is for the hover to end after I stop touching the element.
I tried to play with the touchend in JavaScript but it don't work.
Can anyone help?
:hover is for pointing devices. You shouldn't be trying to optimize it for other types. Here is a definition from mdn:
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
A wise thing to do to avoid this weird behavior for non-pointing devices, is to apply the hover effect only for those who support it with #media (pointer: fine), like so:
button {
/* Styles for all type of devices */
}
#media (pointer: fine) {
button {
/* Styles for pointing devices */
}
button:hover {
/* Hover effects for pointing devices */
color:red;
}
}
Related
on my website I got a navigation with many elements. The navigation is scrollable and if you hover over an element, it gets highlighted.
The Problem: If I visit my website with my iPad, while scrolling in the navigation, the element I drag on shows its hover-effect and gets highlighted. I don't want this to happen, whats a good solution for this problem?
Thanks in advance!!
I have not try this yet but you can consider this:
Add an on-scroll function to <body>, in the function, set the color of all elements in navigation list to normal color(the color when not hovered at), so that when you scroll the page on your Ipad, even you drag the element it will still not highlighted.
<body onscroll="scroll_function()">
<script>
function scroll_function(){
document.getElementByClassName("element_name").style.backgroundColor = ... (your normal color)
}
</script>
Create an CSS media query that will use custom css on devices smaller or a larger screen than x pixels
#media only screen and (max-width: 600px) {
some-element:hover{
text-decoration:none;
}
}
Hover effects are pointless on mobile devices and tablets because you do not use a mouse to hover over elements.
Use all you hover effects as such:
#media screen and (min-width: 1024px) {
/* STYLES HERE */
}
If you still use the hover effects on all media queries, when you click on elements, the hover effect will take place.
Working without your code (always good to include that in a question btw), I'm gathering that the hover effect will be entirely CSS in spite of the javascript tag in the question, if that is the case you can use media queries to resolve this by simply creating a profile for devices you don't want the hover effect to happen on.
WRT the somewhat troublesome larger resolutions on modern handhelds, here is a quite extensive list of media query resolutions for differing handheld devices which should be helpful if you were to go down the route of attempting an MQ solution.
:hovering on a touch screen can be an accessibility problem (dropdowns) or just muck up design elements (changing colour on a button press and not reverting due to the virtual hover).
So I've resolved to having different behaviour when an element is touched and when it is hovered with the mouse. This is easy enough to implement with Javascript and leveraging mousein and mouseout events, and adding a hover class where appropriate. There are two main problems with this:
It's Javascript based which has a number of implications. I wouldn't call not having hover functionality an accessibility issue, as there is a pointer cursor, though.
My main problem is that I will have to manually indicate which elements need the classes added outside of my CSS styling. This is extra work, adds an extra area to make mistakes and isn't semantically nice.
So my question is: is there any pure CSS way to detect if and only if the mouse has hovered over an element? One that doesn't respond to touches.
It is not sufficient to detect if a device is touch capable and remove hover functionality from them. Now that many devices have both mouse and touch, this will hinder a perfectly good mouse-enabled experience.
Method 1: Javascript
Why not start with the body having a .no-touch class on it, and then, using JS, detect the device, and remove the class if the device is mobile.
if(//Code to detect mobile)
$("body").removeClass("no-touch");
Then, in your CSS, code all :hover to be dependent on that parent class.
.no-touch a:hover
{
text-decoration: underline;
}
This will ensure that the hover styles are enabled by default if JS fails, as well as preventing the otherwise long process of delegating each and every element that you want to disable hover for.
The converse of this would be to add a class if the device is mobile, and then code the CSS to exclude the body that has that class:
body:not(.touch) a:hover
{
text-decoration: underline;
}
It's not perfect, as it still requires JS, but there is currently not a known purely-css way to detect touch events as opposed to mouse events, at least as I've been able to find through a somewhat extensive Google search.
Method 2: CSS Media Queries
The other option would be to use media queries, but this still leaves a lot to be desired, as devices continue to get better resolution; some tablets can have screen widths equivalent to some old monitors, and unfortunately, old technology dies very slowly.
This has the advantage of being purely CSS, but has its own pitfalls all the same.
You may have someone using an iPad in landscape # 1024x768 that would be considered a touch device, while an older gentleman is using a desktop on an old 3x2 lcd monitor that has the same resolution: 1024x768
Here's the code though, if you want it:
#media all and (min-width: 1024px)
{
a:hover
{
text-decoration: underline;
}
}
Solution with CSS only, without Javascript
Use media hover with media pointer will help you resolve this issue:
#media (hover: hover) and (pointer: fine) {
a:hover { color: red; }
}
I'm developiong application in phonegap with jQueryMobile for mobile devices only. In which I've search icon. I want to give hover effect on that icon when user touchs it.
I've achived this by css:
<a href="search.html" class="custom_header" >
.custom_header:hover {
background:url('../images/effect_glow.png') no-repeat center;
Now the problem is this hover effect stays after touch. I want behaviour like mousein and mouseout. In this case effect stays even that part is not touching.
How to remove hover effect after finger get off on it?
You maybe know this but :hover doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions.
While it is implemented on mobile devices it is extremely buggy, mostly on iOS devices. On the other end you cant use :focus because it can be used only on a elements that support focus so a tags and buttons are ruled out. Also :active is no go on mobile devices.
In this case we can use jQuery to remedy this problem.
Working example: http://jsfiddle.net/Gajotres/84Nug/
In this example I have used vmousedown, vmouseup and vmousecancel events so I can test it on desktop / mobile devices alike. Just replace them with touchstart, touchend and touchcancel.
touchcancel / vmousecancel is needed because sometimes button can stay in pressed state.
Code:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('touchstart','.custom_header' ,function(){
$(".custom_header").css("background","url('http://www.cesarsway.com/sites/default/files/cesarsway-images/features/2012/March/Puppies-and-Exercise.jpg') no-repeat center");
}).on('touchend', function(){
$(".custom_header").css("background","red");
}).on("touchcancel", function() {
$(".custom_header").css("background","red");
});
});
I have an issue where when a user taps on a <select> box it opens the "scroll wheel" interface in iOS which pushes the modal they are interacting with up. This is fine, but it doesnt then restore the modal's position when the interface closes.
Are there any vendor specific DOMEvents or css pseudo-elements i could use to invoke a position calculation and change when this ui element is closed (either through the "done" button or by tapping outside the interface)?
I had a similar, though not identical issue with the iOS scrolling select widget. In my case, the page would zoom when the scrolling select widget opened, and did not zoom back out when it was closed.
Oddly the fix was to set the font-size relatively large:
/* iPhone4+ select box fix */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
select { font-size: 2em; }
}
The media query ensured this only took place on an iPhone.
There is a HTML button, with 3 backgrounds - each for normal, hover and clicked states. Of course, it works fine with non touch device. If the button is clicked on touch device, the :hover state is also triggered and stays until another element is touched.
Is it possible to programmatically remove :hover state from element after it was clicked or prevent it from activating on touch devices?
Sorry, but suggestions to a detect mouseover and mouseout events and add artificial classes are not accepted.
One possible solution is to add "no-touch" class to html element in advance and remove it if only touch device is detected. In that case, CSS selector "html.no-touch button:hover" will not match for touch device.
Do you know more elegant solutions you may suggest?
I would try to overwrite the :hover state in an additional style-sheet for handheld devices like:
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
and in handheld.css put something like:
#some_selector:hover {
background: none; /* if you are setting a background in the main css file for example */
}
However, I´m not sure if handheld and touch screen are completely the same, there might be devices that have a touch screen and are not qualified as a handheld.
Edit: It seems you cannot detect touch screen devices 100% reliably, also see this question.
Seems that this issue can be resolved by overwriting the :hover state for a given element in media query - see this question:
CSS hover not being ignored on touch screen devices