Apply css property hover, ontouch in mobile devices

Question

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>

FYI, hover not working in mobile/touch device to handle hover event you need touch event using javascript or jQuery just like [https://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible] — Bharat Makvana, Aug 03 '18 at 18:36
thanks, just now I found this out too, using touchstart and touchend together on one element will solve my problem — Developer, Aug 03 '18 at 18:52

brianespinosa · Answer 1 · 2018-08-03T17:12:31.270

1

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.

edited Aug 03 '18 at 17:12

answered Aug 03 '18 at 17:06

brianespinosa

2,408
12
22

its still there – Developer Aug 03 '18 at 17:09
I'm sorry... I completely misread your question. I thought you wanted to know how to add it. Editing my answer now. – brianespinosa Aug 03 '18 at 17:11
I updated the codepen with your code,but its not working, in mobile view if I touch this then it takes the border, later if i am not touching it border is still there – Developer Aug 03 '18 at 17:11
Take a look at my revised answer now. ;) – brianespinosa Aug 03 '18 at 17:13
user needs to touch outside the image then its border goes away.( we dont want this feature). if the user is not touching it , it shouldn't show border – Developer Aug 03 '18 at 17:16
I added screenshot to explain more please check it – Developer Aug 03 '18 at 17:20
this.primaryPhone.number.value. replace('(', '').replace(')', '').replace('-', '').replace(/ /g, '').replace(/_/g, '')) – Developer Aug 07 '18 at 13:31

Developer · Accepted Answer · 2018-08-06T12:21:41.497

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>

score 0 · Answer 3 · edited Jan 11 '19 at 13:10

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.

Apply css property hover, ontouch in mobile devices

3 Answers3