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.
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I have added my own icons on my website. The first is for default icon that will be used on website, while the second is for links. However after clicking on a link, when a new page loads, or when I click on an image, the default arrow icon appears for a brief moment.
I am using Google Chrome v.56 and Mozilla Firefox 49. Is this a bug or am I doing something wrong?
CSS File:
body {
cursor: url(images/SnCPointer.png), auto;
}
a {
cursor: url(images/SnCLink.png), auto;
}
The website is: http://www.rglowimeeting.org/index.htm
The issue can be reproduced by holding down the 1st mouse button over the Website under Construction image
I have a few local links on the same HTML page. Every one of them is defined as follows:
<a class="thumbnail" href="#idn">Anchor text(n)<span id="idn">Span text(n)
Where idn=id1, id2,...
The Anchor text is displayed all the time but the Span text should be displayed only when hover on the Anchor text.
So in an style page I made the following definitions:
<style>
.thumbnail span {display:none;}
.thumbnail:hover span {display:block;}
</style>
On my desktop with windows10 and using no matter what browser it works fine.
On my mobile phone with android and Opera mini the situation is as follows: I asume that a single tap is the same as hover, so I tap on the first link in the page order and the "span" information is displayed very well. I go back and tap on the second link in the page order and surprisingly is displayed the "span" information for the first link. Between the two links is a distance of aproximately 10 rows so I don't think is a matter of confusion.
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}