:hover на iOS vs Android

207

23 октября 2018, 06:10

Есть такой код:

$(document).ready(function(){ 
    var $page = $('html, body'); 
    $('a[href*="#"]').click(function() { 
        $page.animate({ 
            scrollTop: $($.attr(this, 'href')).offset().top 
        }, 400); 
        return false; 
    }); 
});

#box { 
  margin-top: 2200px; 
} 
 
.show { 
  display: none; 
  background: aquamarine; 
  width: 130px; 
  text-align: center; 
} 
 
a:hover ~ .show { 
 display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<a href="#box">Scroll BOX!</a> 
<div class="show"> 
  Text text text yo 
 </div> 
  
<div id="box"> 
  <h2> Hi Scroll! </h2> 
</div>

Что меня волнует: на iOS(iPhone) при нажатии на ссылку срабатывает :hover, при втором нажатии происходит scroll. Всё круто.

На Android же при нажати срабатывает :hover и скролл сразу. Как сделать чтобы на Android было такое же поведение? Или хотя бы какой-то компромисс.

Answer 1

Всё круто

IMHO: не круто. это неверное поведение.

как сделать по вашему ? - средствами JS

определить мобильный браузер или десктопный, если мобильный
по первому клику показывать. по второму - переходить

как сделать правильно ?

в приведённом ниже коде, не используется ни одной библиотеки,
а JavaScript используется исключительно для формирования HTML

let html = (a, ...b) => String.raw(a, ...b); 
document.head.insertAdjacentHTML('beforeend', getStyle()); 
window.addEventListener('load', () => { 
    let data = [ 
        ['a', 'b', '#box'], 
        ['a', 'b', '#box'], 
        ['a', 'b', '#box'], 
    ]; 
    document.body.insertAdjacentHTML('beforeend', html ` 
        <header>${getNav(data)}</header> 
        <section> 
            <div id="box"> 
                <h2> Hi Scroll! </h2> 
            </div> 
        </section> 
    `); 
}); 
function getNav(arr) { 
    let line = (arr) => html ` 
        <li> 
            <ul> 
                ${arr[2] ? html ` 
                <a href="${arr[2]}"> 
                    <li>${arr[1]}</li> 
                </a> 
                ` : null} 
            </ul> 
            ${arr[0]} 
        </li> 
        `; 
    return html ` 
    <nav> 
        <ul> 
            ${arr.map(line).join('')} 
        </ul> 
    </nav> 
    `; 
} 
function getStyle() { 
    return html `<style> 
        #box { 
            margin-top: 2200px; 
        } 
        ul { 
            margin: 0; /* Отступ слева в браузере IE и Opera */ 
            padding: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ 
            display: inline-block; 
            width: 70px; 
        } 
        li { 
            list-style-type: none; /* Убираем маркеры */ 
            border-bottom: solid 1px; 
        } 
        ul li:hover { 
            background-color: gray; 
        } 
        /* , */ 
        ul li ul { 
            display: none; 
            position: absolute; 
            left: 78px; 
        } 
        ul li ul li { 
            cursor: pointer; 
        } 
        ul li:hover ul { 
            display: block; 
        } 
    </style> 
    `; 
}