发表新帖
发表新帖

Fix CSS hover on iPhone/iPad/iPod

前端 未结
关注
16 569
星月不相逢
星月不相逢 2020-12-02 14:53

I want to fix the hover effect on iOS ( change to touch event ) but I dont have any idea . Let me explain this . You have a text in your page :



        

                      

              相关标签:
16条回答
  • 醉梦人生
    2020-12-02 15:04

    Old Post I know however I successfully used onlclick="" when populating a table with JSON data. Tried many other options / scripts etc before, nothing worked. Will attempt this approach elsewhere. Thanks @Dan Morris .. from 2013! 

         function append_json(data) {
     var table=document.getElementById('gable');
     data.forEach(function(object) {
         var tr=document.createElement('tr');
         tr.innerHTML='<td onclick="">' + object.COUNTRY + '</td>' + '<td onclick="">' + object.PoD + '</td>' + '<td onclick="">' + object.BALANCE + '</td>' + '<td onclick="">' + object.DATE + '</td>';
         table.appendChild(tr);
     }
     );
    0 讨论(0)
  • 粉色の甜心
    2020-12-02 15:05

    I"m not sure if this will have a huge impact on performance but this has done the trick for me in the past:

    var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();
    0 讨论(0)
  • 清歌不尽
    2020-12-02 15:05

    Add a tabIndex attribute to the body:

    <body tabIndex=0 >

    This is the only solution that also works when Javascript is disabled.

    Add ontouchmove to the html element:

    <html lang=en ontouchmove >

    For examples and remarks see this blogpost:

    Confirmed on iOS 13.

    These solutions have the advantage that the hovered state disappears when you click somewhere else. Also no extra code needed in the source.

    0 讨论(0)
  • 梦如初夏
    2020-12-02 15:09

    I know that the question is old but still relevant.

    The only solution that I've found that works is using @media query like this:

    @media (hover) { my-class:hover {
  //properties
 }
}

    My reference: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

    0 讨论(0)
  • 北荒
    2020-12-02 15:11

    I know it's an old post, already answered, but I found another solution without adding css classes or doing too much javascript than really needed, and I want to share it, hoping can help someone.

    I found that to enable :hover effect on every kind of elements on a Touch enabled browser, you need to tell him that your elements are clickable. To do so you can simply add an empty handler to the click function with jQuery or javascript.

    $('.need-hover').on('click', function(){ });

    It's better if you do so only on Mobile enabled browsers with this snippet:

    // check for css :hover supports and save in a variable
var supportsTouch = (typeof Touch == "object");

if(supportsTouch){ 
    // not supports :hover
    $('.need-hover').on('click', function(){ });
}
    0 讨论(0)
  • 情话喂你
    2020-12-02 15:14

    Some people don't know about this. You can apply it on div:hover and working on iPhone .

    Add the following css to the element with :hover effect

    .mm {
    cursor: pointer;
}
    0 讨论(0)
 看不清?
提交回复
热议问题