When using Firefox on a mobile device, touching on an element triggers the :hover pseudo-class. However, when using Firefox on a PC in Responsive Design Mode with Touch Simulation active, the :hover is not triggered by clicking the mouse button on the element. If I turn off Touch Simulation, then hovering the mouse over the element will of course activate :hover, but isn't the point of Touch Simulation to translate mouse-inputs into their corresponding touch-events? If touching an element on a mobile browser activates :hover, then shouldn't clicking the mouse in Touch Simulation also trigger :hover?
Simple JSFiddle to illustrate - view both on PC Firefox in RDM and on mobile Firefox to see the difference.
Am I doing something wrong, or is it a deficiency with Firefox RDM or with my understanding of Touch Simulation?
As you said, :hover :focus :active are pseudo-classes, according to this link from mozilla :hover matches when the user interacts with an element with a pointing device and problematic on touchscreens. We can achieve same effect :hover does in touchscreen using :active pseudo-class. Or combination of both.
As you said simulation of touch for :hover class is not working in Firefox. There is no promise to support it in future. Touch and pointing device worked in a very different way so its better not to use :hover that need the position of pointer to activate. On the other hand touch screen have no record of position before touch, so :focus :active are better alternative.
I will be happy if it does any help to you. Thanks.
Related
I'm building this website using Wordpress. The issue that I am having is that the functionality I set up for the triangular wedge boxes to disappear when hovered over works fine on a desktop, but does not work well on mobile. I've found through research that :hover doesn't work well with mobile, and have tried different pseudo classes like :active and :focus, but with no luck. Any suggestions would be greatly appreciated.
Link to My Site
Thanks.
A :hover event does not exist on touch devices, but you can add :active, which should have a similar effect (when the finger touches the element without tapping it), like
.my_div:hover, .my_div:active{
background-color: #fa0;
}
I've noticed that sometimes if an element has css rules defined for its :hover state on mobile browsers they are applied whenever an element has focus. Is this expected behavior?
According to W3, :hover is applied when "some pointing device" is placed over the element:
The :hover pseudo-class applies while the user designates an element
(with some pointing device), but does not activate it. For example, a
visual user agent could apply this pseudo-class when the cursor (mouse
pointer) hovers over a box generated by the element. User agents not
supporting interactive media do not have to support this pseudo-class.
Some conforming user agents supporting interactive media may not be
able to support this pseudo-class (e.g., a pen device).
W3 src
So, no, :hover might not, and is not on some, supported on mobile devices.
You should use :focus instead.
Does css hover work on mobile devices?
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.
Here's my site. This is the last problem of a series of cross-browser discrepancies I've experienced and solved thanks to the community.
Basically, in Internet Explorer 8 and Internet Explorer 9 the :active styles are not applied to the menu. It should turn darker when pressed. Please let me know why and how to fix. Thanks in advance.
The :active pseudo-class applies while
an element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it. See W3 documentation.
But you are applying your :active selector to your <li> element, which cannot have an active state since it never really gets activated - only hovered. You should apply :active state to <a> <- True for IE 6.
UPDATE: Here's a test sample at jsFiddle as you can see it works ok on <a> element but not ok on <li>
Interesting info I found here
The :active pseudo-class applies while
a link is being selected by the user.
CSS1 was a little ambiguous on this
behavior: "An 'active' link is one
that is currently being selected (e.g.
by a mouse button press) by the
reader." Also, in CSS1, :active was
mutually exclusive from :link and
:visited. (And there was no :hover
pseudo-class.)
CSS2 changed things so that rules for
:active can apply at the same time as
:visited or :link. And the behavior
was explained a little better: "The
:active pseudo-class applies while an
element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it."
IMO, FF et al comply with CSS2 better
than IE. But since a link is supposed
to load a new page, IE could
legitimately say the link is still
"active" while the new page is
loading, which is what happens.
You can see a similar
counter-intuitive behavior in FF by
clicking the link, but moving your
mouse off of the link while holding
the mouse-button down. The link is not
activated (a new page is not loaded),
but the link remains in the :active
state. On the other hand, Chrome and
Opera de-activate the link, but at
different times; Chrome as soon as the
mouse leaves the link area, Opera not
till the mouse button is released. IE
behaves the same as FF in this
example. (Hit enter after dragging
your mouse off the link, and you will
see more differences in behavior.)
I would not call any of these
differences "bugs", because of
ambiguities in the spec.
The only work-around I can offer is to
accept that you can't control every
aspect of browser behavior. Users of
different browsers have differing
expectations of behavior, and if you
start messing with user expectation,
you're on the wrong path.
Just for the sake of relevancy and to save anyone else the hassle of searching for a solution, I also found a "bug" in IE <= 10, where you cannot apply styles to an :active child, e.g;
a:active img {
position:absolute;
top:-30px;
}
The above won't change the position of the image in IE <= 10, in which case you would need to apply :active on the child element itself;
a:active img,
a img:active {
position:absolute;
top:-30px;
}
Which in most cases isn't a perfect solution as any text inside the anchor needs to have a higher z-index value than the image, meaning that the image will only change it's position based on clicking the image itself (giving the image the :active state)... which left me in a minor bind, but a bind none-the-less (for a css only solution).
So although this is not a fix, it is more of a note of "warning" for others about the downfall to the :active pseudo selector in IE. Rubbish. =(
In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
a:hover {
color: red;
}
words
http://jsfiddle.net/RHGG6/1/
This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?
From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.
Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.
Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.
words
Works for me - Note: only tested with chrome in win7.
I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.
The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome.
On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.
When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.
Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.
var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>
You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/