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;
}
Related
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.
CSS
jamesburnett.com
When viewing the site mobile size screens, the main menu becomes a drop down menu. When you attempt to click on it, it blinks for a second or two but doesn't ever drop down and stay. I've tested on iOS and Android, as well as just using the google inspect element. It fails to drop down on there too. I'm not quite sure what's wrong and any help would be greatly appreciated!
You likely have deeper problems with the way things have been set up in html and/or js. #main-menu > ul.menu{display:none;} for media widths below 767px. Whatever is toggling display on the menu when you click is possibly triggering more than once or maybe not setting/toggling the classes the way that it should. Double check your naming, you might not be setting dt-menu-expand class, which, although it's hard to tell, it looks like that's what you intended from your css.
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
I redesigned a website for a friend using twitter bootstrap which i supposed would save me from thinking about cross-browser compatibility.
Now I try to use it with firefox only to notice that the controls of the Carousel component move away when you hover them, thus making it impossible to click them. Not to mention it looks rather unprofessional.
The strange behavior can be seen here and occurs to me on Firefox 18.0.2:
http://snow-first.com/snow-rabbit-3/
Anybody has a clue to what's going on? Tried looking in the css but the only thing that should happen on hover is an opacity change...
for the selectors .carousel-control:hover, .carousel-control:focus (line 576 of your CSS) add position:absolute
I have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?
Found the answer myself with some more digging through the code and a little Google help:
The twitter widget among all the proprietary stuff it does also declares a touchstart event, which by itself anywhere on the page is enough to make mobile safari utilize the CSS :active pseudo style.
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/