发表新帖
发表新帖

mobile safari links retains focus after touch

前端 未结
关注
8 501
天涯浪人
天涯浪人 2020-12-13 13:33

My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by

相关标签:
8条回答
  • 小蘑菇
    2020-12-13 13:55

    Hover is a CSS pseudo class designed to work with a pointer not so much with touch events. You would normally want to avoid the use of hover altogether since it makes no sense on mobile. One of the easiest ways to deal with this is by placing your hover CSS inside a media query. You can do this by targeting tablets or desktop screens, here are the two solutions:

    1- Targeting iPads:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

    2- Targeting desktops: 

    @media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

    Either way is valid. You can change the values of min and max width if you notice that the CSS is being triggered incorrectly in certain devices.

    0 讨论(0)
  • 心在旅途
    2020-12-13 13:58

    This is a workaround:

    var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
    0 讨论(0)
  • 北荒
    2020-12-13 14:01

    If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:

    a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}
    0 讨论(0)
  • 忘掉有多难
    2020-12-13 14:05

    If you are using SCSS, I recommend you do the following:

    // primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
    background: red;
    color: white;
}

.primary-button:hover {
    background: green; // Only for big screens
    @media(max-width: 768px) {
        background: red;
    }
}

    If you reset the value of the background to the initial value, you will no longer have problems with the button being pressed on devices <= 768px resolution

    0 讨论(0)
  • 温柔的废话
    2020-12-13 14:06

    This is how I fixed it for my list with a hover:

    CSS:

    ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

    jQuery:

    $(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

    And a fix for hover on back buton navigation...

    <body onunload="$('a').blur();">

    or

    $(window).unload( function () { $('a').blur(); } );

    For the unini­ti­ated, the unload event occurs right before the browser leaves the page. By blur­ring all of the links in the page on unload, I was able to un-stick the hover state. Returning to the orig­inal page using the back button shows the clicked link in the default state.

    Unfortunately, an onclick event doesn't seem to trigger the unload, but a refresh does in iOS 5?!

    Stuck On :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Use jQuery to replace - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/

    0 讨论(0)
  • 失恋的感觉
    2020-12-13 14:11

    you need to catch the following events

    touchstart - when your finger touches the screen

    touchend - when your finger leaves the screen

    think of as hover and unhover, if you can post some code we can help you more if you don't understand what I am saying

    $('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

    Give some sample code, the touchstart and end should solve the problem

    0 讨论(0)
 看不清?
提交回复
热议问题