Below is the link of codePen, you can see if its window size then image get border on hover,
In mobile devices it get border on touch. but it doesn't go away if user is not touching it (after touching it). user needs to touch outside the image then its border goes away.
In the below image, user touch the image and its showing border, later user is not touching it and its still showing border.
.swap {
background-image: url('https://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg');
width: 200px;
}
.swap a {
display: block;
}
.swap a img {
width: 200px;
height: auto;
}
.swap a:hover img {
border:10px black solid;
}
.swap a:focus img {
border:none !important;
}
<div class="swap">
<a>
<img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129">
</a>
</div>
Adding the :focus pseudo class will work for you to override what is happening.
.swap a:hover img {
border:10px black solid;
}
.swap a:focus img {
border:none !important;
}
If you are working on a responsive project that you do not want :focus to show on non-touch devices you can try to target devices by size, or more reliably, you could use Modernizr to feature detect.
So I solved this question by JavaScript events,ontouchstart and ontouchend please check out the below plunkr link
https://plnkr.co/edit/bVFQMUjJXo5SvLGroQH3?p=preview
function myFunction()
{
document.getElementById('swap').setAttribute("class", "style1");
}
function myFunctions()
{
document.getElementById('swap').setAttribute("class", "style2");
}
<div id="swap">
<a><img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129" ontouchstart="myFunction()" ontouchend="myFunctions()" >
</a>
</div>
Prepared for another query, just replace P with your element.
It now seems best to avoid using hover altogether with ios or touch in general. The below code applies your css as long as touch is maintained, and without other ios flyouts. Do this;
Jquery add: $("p").on("touchstart", function(e) { $(this).focus(); e.preventDefault(); });
CSS: replace p:hover with p:focus, and add p:active
Options;
replace jquery p selector with any class etc
to have the effect remain, keep p:hover as well, and add body{cursor:ponter;} so a tap anywhere ends it
try click & mouseover events as well as touchstart in same code (but not tested)
remove e.preventDefault(); to enable users to utilise ios flyouts eg copy
Notes
only tested for text elements, ios may treat inputs etc differently
only tested on iphone XR ios 12.1.12, and ipad 3 ios 9.3.5, using Safari or Chrome.
Related
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
I am having trouble making elements hover on a mobile device.
In my CSS, I type something like:
.button:hover {
background-color: #fff;
}
This seems to hover fine on my desktop, however on my iPhone and other touch devices, I can't seem to make the button hover.
There is no hover event on mobile, you can define hover behavior and it will work on desktop. But on mobile, you will see this hover only by click/touch.
Hovers mean one thing on the other. in this case its the mouse cursor over the HTML button or whatever element you use.
In the case of a phone, there is no mouse cursor. its always a click. Hovers in most cases would show only on click or touch. If you really need this you can try the Javascrit onclick() or other functions, so when they click or touch, you can add a bit of something.
For a very quick solution of this problem with jQuery/CSS, I did the following.
wrote styles for my element like this:
.one-block:hover, .one-block.hover { ... }
positioned it:
.one-block { position: relative; }
added the last element in this block -> .mobile-mask:
<div class="one-block">
....
<div class="mobile-mask"></div>
</div>
positioned .mobile-mask:
.mobile-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
hide it for non-mobile (this part is not precise at all: just with css. if you detect mobile devices by some other means and, for example, give a class to body, than it will be more precise. in this case I just need a quick solution):
#media (min-width: 681px) {
.mobile-mask {
display: none;
}
}
create javascript that will add/remove .hover class:
$('.mobile-mask').on('click', function(){
$('.list .mobile-mask').show();
$('.list .one-block').removeClass('hover');
$(this).hide();
$(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
var windowWidth = $(this).width();
if(windowWidth > 680){
$('.list .one-block').removeClass('hover');
}
});
I have an element that overlays another element. The main element is a canvas where elements constantly have mouse interactions and the element directly overtop of it just shows elements that act as little markers. Same position, same size and it's important the overlay is overtop of the canvas.
What would it mean to make this "overlay" only exist visibility wise? As in having no possible user input because for its purposes it's not really there to be interacted with, just showing something.
Removing selection in CSS stops you from clicking on it but it's still overtop of the other element and doesn't allow mouse events. Hiding the element removes its presence but also makes it invisible.
In a normal desktop application you would just draw something to the screen and add functionality if you wanted but with HTML those two things are inherently the same.
I believe adding in the CSS the following code solves your issue:
.no-interaction {
z-index : -5
}
OR
.interaction {
z-index : 5
}
Turns out all it took was setting the pointer-events CSS attribute to none on whatever you want to have no presence.
I figured it would be a little more interesting than that, but there's a built in way in CSS.
<div id="canvas"></div>
<div id="overlay"></div>
#canvas, #overlay {
width: 500px;
height: 500px;
position: absolute;
}
#canvas {
background: blue;
}
#overlay {
background: red;
pointer-events: none; // right here
}
$('#canvas').click(function() {
alert('Clicked');
});
https://jsfiddle.net/ufsy33aw/
I want to remove the selection-highlight on all images on my page.
I found some useful additions like :
CSS
img {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
pointer-events:none
}
But when I press down my mouse button and select multiple things or press Ctrl+A for "select all" my images get highlighted with a blue shade.
I tried to change it via :
CSS
img::selection {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}
But that don't have any effect.
Does someone have a useful solution or is there none yet ?
P.S. : I don't care about selecting my images - I just want to get rid of that blue shape.
Here goes a wacky solution I came up with...
1) After some testing I found that this only occurs on mozilla. Other browsers don't show the blue selection on images when the code
img::selection {
background: transparent;
}
is set.
2) Even mozilla - only has a problem with image elements. But other elements with a background-image obey the ::selection rule.
So technically we could work around this assuming we add an empty span in our markup after each img element which we set to display:none;
Then we can add some CSS which will only run in firefox which sets the images to display:none and places a background-image on the adjacent span.
Like this:
FIDDLE
**
img::selection {
background: transparent;
}
img + span {
display: none;
}
#-moz-document url-prefix() {
img {
display: none;
}
img + span {
background: url(http://placehold.it/200x200) no-repeat;
width: 200px;
height: 200px;
display: block;
}
}
<div>Hello there </div>
<img src="http://placehold.it/200x200" /><span></span>
<div>Hello there </div>
1: http://jsfiddle.net/GMuzV/30/
This disabled highlighting on a DOM element:
function disableSelection(target){
if (typeof target.onselectstart!="undefined") // if IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
target.style.MozUserSelect="none";
else // others
target.onmousedown=function(){return false;}
target.style.cursor = "default";
}
Use it like this:
disableSelection(document.getElementById("my_image"));
http://jsfiddle.net/7Q7ht/10/
<a class="edit linkButton" href="javascript:void(0)" title="Enable rack editing">
<span class="icon-pencil"></span>
Edit
</a>
$(function(){
setTimeout(function(){
$('.linkButton').addClass('disabled');
}, 2000);
setTimeout(function(){
$('.linkButton').removeClass('disabled');
}, 4000);
});
a.linkButton {
color: red;
}
a.linkButton:hover {
color: blue;
}
a.linkButton.disabled {
color: gray;
}
Fairly simple code. Works fine in modern browsers. Under IE8 when I add the disabled class to linkButton, the icon-pencil span continues to be painted red, not gray. Is there a simple fix for this sort of thing?
Here's a picture, don't worry about the icon not showing up, I just don't have the font loaded:
For me in IE8, it turns from red to gray, then red again. That's the same thing it does in Chrome.
You probably know that Microsoft says the disabled CSS3 pseudo-class only works in IE9 and up. Otherwise, the question How do you style disabled textarea in IE8? suggests some solutions.
IE8 does not redraw pseudo-elements without change the content.
You can solve that problem with that hack...
a.linkButton {
color: red;
.icon-pencil {
content: "\F040 "
}
}
a.linkButton:hover {
color: blue;
.icon-pencil {
content: "\F040 "
}
}
a.linkButton.disabled {
color: gray;
.icon-pencil {
content: "\F040 "
}
}
The thing is: IE8 does not redraw pseudo-elements like FontAwesome icons without a change on the content. So you need to force that change of content.
The way I did that was retrieving the content set by FontAwesome and adding a space. Unfortunately I only could do that repeating the same code for each selector that I need change the style.