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)?
Related
I'm using hover (css) in an image with a link to show a text. It works perfectly in desktop and in android devices (if you click for a second in the image then you hover in mobile).
The problem is that I realized in iOs devices, when you hold the click for a second in a link, it opens a window with a few options:
Open in a new tab, download link file, copy, share...
Is there any way to get the hover in mobile with iOs?
.links-home a:hover p,
.links-home:hover .not-exhibited {
transition: opacity 0.5s;
opacity: 1;
text-align: center;
}
with a #media-Query try to replace the :hover with :focus.
I can't test this because i dont have an iOS device, but according to this post the item stays focused until another item is clicked and therefore a short tap is enough to show the extra text.
Maybe you have to put the images into an anchor (<a>) to get focus work properly.
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.
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}
Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.
I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..
they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..
However, on Firefox they do appear to get triggered
I have had a look at people having issues with this to do with jQuery hover events not firing: here
If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here:
http://jsfiddle.net/Lm2fa/1/
EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse
EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)
I have a navigation bar with some nodes that have a drop down menu to show more options, everything works wonderfully in IE/Firefox but in Chrome on :hover the links go transparent instead of having a nice background color like in IE and Firefox.
Here is a JSFiddle, if you run it in Chrome and hover over the Admin option you will see the drop down and extended options, when hovering over those they should display similar to the top level items but they do not.
http://jsfiddle.net/6jX5J/
Anyone see any problems in the HTML or CSS?
Thanks!
Try changing you CSS selector from descendant to a child selector in:
#nav li:hover
Change to
#nav>li:hover