My button changes its color on :hover, see:
button {
background-color: orange;
}
button:hover {
background-color: darkorange;
}
Example: https://jsfiddle.net/oepb5ks4/
Works great on desktop, but on mobile - where :hover should not exist – the browser* still changes the color, but after touching the button.
Why is that behavior? Am I missing something? What makes somebody think that implementing (parts of) :hover on mobile browsers makes any sense?
Is there a nice and clean solution for this (preferably without Media Queries or JavaScript)?
*Tested in Chrome (in "Device Mode") as well as in iOS Safari.
In you CSS you could filter for mobile devices with the #media rules and filters (documentation at w3). You could state "if the media has the hover functionality then the hover color should be orange":
#media not all and (hover: none) {
a:hover{
color: orange
}
}
You also could try to detect it with JS and manually adjust the color to always be orange when on mobile.
I believe that your problem occurs because in order to click on a button on PC you must have hovered over it before, so the color changes on mobile after you clicked it.
Update I just read the comment under the question by Temani Afif: apparently :hovers are "converted" to something like :onclick on mobile because of the lack of the hover feature on phones. As many websites have on hover menus mobile users couldn't access those if they wouldn't translate it.
Another thing you could try is to force the color of the visited links with this:
a:visited {
color: orange!important;
}
Update 2 Included the new media tag and took advice from this answer on a different question and it's comment on how to use not and the #media rules.
Related
Is it possible to change the color of the bubble or drop that is under the text cursor of mobile device inputs? I changed the caret-color but it doesn't seem to have any effect, the bubble is still blue.
I don't know the correct technical term for that bubble/drop.
My code:
* {
caret-color: green;
}
Result/Example:
Edit: This drop/bubble only appears on Android devices apparently.
I have a problem with some link in the upper menu of the account and the language selection of this site: shop.castorfashion.it.
When viewed from a mobile device (both android and ios) menus need to be tapped twice to work.
I can't find a solution to solve the problem.
The site was created using prestashop.
Account menu:
Languages menu:
Thank you.
I just tried your site on my iPad and the double tab comes from the hover style. You can remove it with media queries.
#media only screen and (min-width: 1000px) {
#topbar a:hover {
color: #79c753;
}
}
You still have som main hover styles in your site.
I am testing website on Dell XPS device, which supports both touch and mouse(laptop/tablet). I have some menus that have submenus and have hover, active and selected css where I change from display:none to disblay:block on the submenus(if no submenu then user is redirected to the page that is represented by menu option).
Everything works just great on all browsers except IE(on these specific devices - touch/mouse).
Maybe there is a solution for this? To display submenus on touch if there is submenu under the selection. Those menu options that have submenus have class "multi-selection" and menu under it has classes "list" and "lvl-2".
CSS looks like this:
.multi-level{
&:hover, &:active, &.selected{
.list.lvl-2{
//dropdown display trigger
display: block;
}
}
}
Anyone has any ideas how to solve this for IE on such devices that suport mouse and touch interactions(with mouse it works just fine)?
I have a dashboard-like layout with fields (symbaloo.com for example). The user can fill these fields with applications like facebook etc. When a field is clicked, the following pop up comes.
All of these fields have a hover effect for desktop users. When I click the X button on my tablet, the popup will dissapear as expected, but then the field below the X button will have a hover effect. This is not desired. I only want it to hover when a user has a mouse hovering over the field.
It's useful to note that this only happens in the browser Android 4.
What are my options?
As this is just happening on Android, I would suggest that you add some sort of validation checking if the UserAgent is from Android (from what I've read, a simple regex like so: /android/i works), if so, add a class/data-attribute to the body/html, and from there apply a selector.
Code example would be this:
if(/android/i.test(navigator.userAgent)) {
$('html').attr('data-android-device', '');
}
Then on the CSS:
[data-android-device] .mybutton:hover {
/* Reset properties */
}
You can always use Modernizr for this cases. DEtect Touch support, then use your CSS accordingly. Example:
.no-touch .button:hover{//do something if no touch is detected}
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/