Сенсорлық құрылғылардағы түймелерге жабысқақ жылжыту әсерлерін қалай болдырмау керек

Мен әрқашан көрінетін алдыңғы және келесі батырмамен бірге карусель жасадым. Бұл түймелердің көлбеу күйі бар, олар көк түске айналады. IPad сияқты сенсорлы құрылғыларда жылжыту күйі жабысқақ, сондықтан оны басқаннан кейін түйме көк болады. Мен мұны қаламаймын.

  • Әрбір түйме үшін no-hover class ontouchend қосуға болады және менің CSS сияқты: түймесі: емес (.no-hover): hover {background-color: көк; } дегенді білдіреді, бірақ бұл жұмыс үшін өте нашар болуы мүмкін және олай емес Chromebook Pixel сияқты құрылғыларды басқарады (оның ішінде сенсорлық экран және тышқан) дұрыс.

  • documentElement дегенге touch класын қосу және CSS келесідей: html: жоқ (.touch) түймесі: hover {background-color: blue; } Бірақ бұл да екі жақты және а тінтуір.

Мен қалаған күйді ontouchend алып тастауды қалаймын. Бірақ бұл мүмкін емес сияқты көрінеді. Басқа элементке фокустау - апаратын күйді жоймайды. Басқа элементті қолмен түрту арқылы жасалады, бірақ JavaScript-де оны іске қосу мүмкін емес.

Мен тапқан барлық шешімдер жетілмеген сияқты көрінеді. Мінсіз шешім бар ма?

107

19 жауаптар

You can remove the hover state by temporarily removing the link from the DOM. See http://testbug.handcraft.com/ipad.html


CSS -де сізде:

:hover {background:red;}

JS-де Сізде:

function fix()
{
    var el = this;
    var par = el.parentNode;
    var next = el.nextSibling;
    par.removeChild(el);
    setTimeout(function() {par.insertBefore(el, next);}, 0)
}

Сонда сіздің HTML-де сізде:

test
47
қосылды
setTimeout пайдалану кейде жыпылықтайды. Код онсыз жұмыс істемейді, сондықтан оны жоюға болады.
қосылды автор Kevin Borders, көзі
Керемет - жақсы шешім үшін ұзақ уақыт іздеген болатынмын. Рақмет сізге!
қосылды автор mdunisch, көзі
@SjoerdVisscher Мен оны қойдым. StackOverflow кодын жауапта болуды ұнатады, себебі сілтемелер жойылуы мүмкін. (Және бұл жағдайда ол жай ғана басу емес, содан кейін көзді қарап шығу және қандай биттердің бұл әдіс екенін анықтауды талап етеді.)
қосылды автор Darren Cook, көзі
@KevinBorders иә, кейбір құрылғыларда элементтің алынуы мен қайта салынуы арасындағы уақыт кешігуі өте байқалуы мүмкін. Өкінішке орай, мен менің Android 4.4 құрылғысында таптым, бұл параметр setTimeout жұмыс істемеді.
қосылды автор Rodney, көзі
Жарайсың. Шебер сияқты жұмыс істейді.
қосылды автор Nicolas Bouvrette, көзі
Жауапыңызға минималды көрсету кодын қосып көріңіз. Рахмет! stackoverflow.com/help/how-to-answer
қосылды автор jtheletter, көзі
Бұл түзету, менің қолданбамға кірістірілген кезде, менің Nexus 5 және Android 4.4.2 (100 мс-ді кешіктіріп) жұмыс істеп тұрғанымен, менің iOS iPod touch-ң Safari
қосылды автор Anthony Astige, көзі
@janaspage Бұл жерде сілтеме бар. Мен оны қоғамдастықтың вики-жауапына айналдырдым, сондықтан оны осында орналастыру керек болса, алдымен жүріңіз!
қосылды автор Sjoerd Visscher, көзі
@Chris Жақсы нүкте, oncтечен оқиғасында onclick өңдегішті орнату үшін мысалды өзгерттім.
қосылды автор Sjoerd Visscher, көзі
Идеясы қызықты, бірақ мен оны аздап сілкіндіріп, барлық сенсорлық құрылғыларда кеңінен қолдау таппадым. stackoverflow.com/a/39787268/885464 сияқты сенсорлы қолдауды анықтауға негізделген неғұрлым аз инвазивті шешім ұсынғым келеді
қосылды автор Lorenzo Polidori, көзі
@DarrenCook Бірақ элементті алып тастау және оны қайта қосу жақсы ма? Менің ойымша, бұл «дрожь» және қақтығыстардың 60 м/с-тан асатын қосымшаның майсыз қажеттіліктеріне әкеледі деп ойлаймын.
қосылды автор Ethan, көзі
Бұл мен үшін iOS10 жүйесінде сынған. Бірдей мәселе бар ма?
қосылды автор theRyanMark, көзі
Мәссаған! Мен Sjoerd-ның жауапты болатынын білуім керек еді. :) Тағы бір төменгі жағы бар: тышқанмен басқаннан кейін, жылжу әсері жоғалады. Әдетте бұл болмайды, сондықтан ол біртүрлі көрінеді. Onclick орнына ontouchend пайдалану, бірақ ол жұмыс істемейді. :(
қосылды автор Chris, көзі

CSS медиа сұраулары 4-деңгей орындалса, сіз мұны істей аласыз:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Немесе ағылшын тілінде: «Егер браузер дұрыс/шын/нақты/эмуляцияланбаған апаруды қолдаса (мысалы, тінтуір сияқты негізгі кіріс құрылғысы болса), түймесі с артылған кезде бұл стильді қолданыңыз.»

Медиа сұрауларының 4-ші деңгейінің бұл бөлімі әлі күнге дейін қанатты Chrome брендімен енгізілгендіктен, Мен бұл туралы толығырақ білуге ​​болады. Оны пайдаланып, жоғарыда аталған футуристік CSS-ді:

html.my-true-hover button:hover {
    background-color: blue;
}

( .no-touch техникасындағы өзгеріс) және содан кейін кейбір клиенттік JavaScript-ні айналдыру үшін қолдауды анықтайтын бір полифилден қолданып, my-true- hover class сәйкес:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

43
қосылды
Рахмет! Менің мақсатым үшін бұл көптеген браузерлерде қолдау көрсетілетін сияқты caniuse.com/#search=media%20queries және тамаша жұмыс істейді, рахмет!
қосылды автор ragamufin, көзі
caniuse.com/#feat=css-media-interaction арқылы қарауыңыз керек оның орнына Firefox және IE11 нұсқаларында қолдау көрсетілмейтінін көресіз: (сондықтан полифолл қажет
қосылды автор CherryDT, көзі

Бұл өте жақсы шешім емес, жалпы проблема. Жүргізу әрекеті тінтуірмен пайдалы және көбінесе түрту арқылы зиянды. Мәселені жинақтау - Chromebook Pixel және Surface сияқты сенсорлы және тышқанды қолдайтын құрылғылар (бір уақытта, кем емес!).

Мен таптым ең таза шешім - құрылғыны сенсорлық енгізуді қолдаған деп саналмаған жағдайда ғана апару әрекетін қосу.

var isTouch =  !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

if( !isTouch ){
   //add class which defines hover behavior
}

Шынында да, сіз оны қолдайтын құрылғыларды жоғалтасыз. Дегенмен, кейде апаратын сілтеменің өзі, мысалы: элемент салынған кезде мәзірді көрсетгіңіз келуі мүмкін. Бұл тәсіл сенсорлықтың болуын тексеруге мүмкіндік береді және, мүмкін, шартты түрде басқа оқиға қосу.

Мен мұны iPhone, iPad, Chromebook Pixel, Surface және көптеген Android құрылғыларында тексердім. Мен араласуға жалпы USB қосқышы (стилус сияқты) қосылған кезде жұмыс істейтініне кепілдік бере алмаймын.

24
қосылды
Жақсы жауап. Бұл ұқсас шешім: stackoverflow.com/a/39787268/885464
қосылды автор Lorenzo Polidori, көзі
Керемет, бұл мен үшін жұмыс істеді, қауымдық вики/Даррен Кук жауап қарағанда.
қосылды автор Jannik, көзі

Modernizr көмегімен сенсорлы құрылғыларға арналған қонақтарға арнайы мақсаттар қоюға болады:

(Ескерту: бұл StackOverflow үзіндісі жүйесінде іске қосылмайды, оның орнына jsfiddle )

/* this one is sticky */
#regular:hover, #regular:active {
  opacity: 0.5;
}

/* this one isn't */
html.no-touch #no-touch:hover, #no-touch:active {
  opacity: 0.5;
}

: белсенді функциясына .no-touch арқылы бағытталмайтындығын ескеріңіз, себебі ол ұялы және жұмыс үстелінде күтілгендей жұмыс істейді.

10
қосылды
Менің ойымша, мұның бір жолы - Modernizr сияқты, сондай-ақ, кітапхана сияқты пайдалану. -detect.js телефон немесе планшет екенін тексеріңіз.
қосылды автор Gavin, көзі
Мәселе мынада, енді сенсорлы экрандар бар тышқанмен жұмыс істейтін құрылғылардың барлығы орын алады, енді бұл әдіске сене алмайсыз. Дегенмен, мұны істеудің басқа әдістерін көп көре алмаймын ... бұл дилемма
қосылды автор dudewad, көзі
Бұл IMO ең жақсы жауап, алайда мысал қате. Бұл сенсорлық және сенсорлық құрылғылар үшін бірдей жылжыту күйін көрсетеді. Егер .no-touch html тегінде болса, ол тек қана бағыттаушы күйді қолдануы керек. Әйтпесе, бұл жауап менің мөртабанымды алады.
қосылды автор morrisbret, көзі

Ұялы телефонда жабысқақ жылжытумен күресудің 4 жолы : Мұнда пайдаланушының ағымдағы кіріс түріне негізделген құжатты динамикалық түрде « ұстай алады » қосу немесе алып тастау жолы. Ол гибридтік құрылғылармен жұмыс істейді, сондай-ақ, пайдаланушы сенсор және тінтуір/трекпада арасында ауыса алады:

<script>

;(function(){
    var isTouch = false //var to indicate current input type (is touch versus no touch) 
    var isTouchTimer 
    var curRootClass = '' //var indicating current document root class ("can-touch" or "")

    function addtouchclass(e){
        clearTimeout(isTouchTimer)
        isTouch = true
        if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
            curRootClass = 'can-touch'
            document.documentElement.classList.add(curRootClass)
        }
        isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
    }

    function removetouchclass(e){
        if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
            isTouch = false
            curRootClass = ''
            document.documentElement.classList.remove('can-touch')
        }
    }

    document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
    document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();

</script>
6
қосылды
Бұл ең жақсы әдіс, ал егер сіз таймерді 1000 мс-қа дейін арттырсаңыз, сіз ұзақ баспасөзді де қамтуыңызға болады, мына жерден қараңыз: мұнда . Тамаша заттар!
қосылды автор lowtechsun, көзі
$("#elementwithhover").click(function() { 
 //code that makes element or parent slide or otherwise move out from under mouse. 

  $(this).clone(true).insertAfter($(this));
  $(this).remove();
});
5
қосылды
тамаша броу, 10x
қосылды автор Kaloyan Stamatov, көзі
Бұл жауапты click() түймешігін басу арқылы on() көмегімен жақсартуға болады. DOM элементін алып тастап, оны қайтадан бекітіп, мен басу оқиғаларын жоғалтып алдым. Мен функцияны қосқан кезде, элементке байланыстырып, жұмыс істеп, жою және қосу. Мысалы: $ ('body'). ('Click', '# elementwithhover', function() {// clone, insertafter, remove)); Егер сіз осы өзгерісті жасасаңыз, дауыс беремін.
қосылды автор Will Lanni, көзі
шын клоны, басу оқиғасын жаңа элементте сақтайды, элементтің орнын ұстап тұру арқылы апарыңыз. бастапқы элемент оның клондалғаннан кейін доменнен алынып тасталады.
қосылды автор Verard Sloggett, көзі

Мен өз шешімімді орналастыруды жоспарлап жүрдім, бірақ біреу оны әлдеқашан орналастырғанын тексеріп отырсам, @Rodney дерлік жасады. Дегенмен, ол ең болмағанда менің жағдайда ол біртұтас жасады, ол оны ең соңғы шешуші жіберіп алды. Мен mouseenter және mouseleave оқиғаларын табу арқылы бірдей .fakeHover сыныпты қосу/жоюды алдым, бірақ бұл жалғыз, se , іс жүзінде «шынайы» : hover сияқты әрекет етеді. Мен айтып отырмын: үстеліңіздегі элементті түрткенде, оны «жасырып» алғаныңызды анықтай алмайсың - «fakehover» күйін сақтайсыз.

Мен жай ғана click дегенді тыңдауды жөн көрдім, сол себепті батырманы басқанда мен mouseleave өрісін қолмен аламын.

Si бұл менің соңғы коды:

.fakeHover {
    background-color: blue;
}


$(document).on('mouseenter', 'button.myButton',function(){
    $(this).addClass('fakeHover');
});

$(document).on('mouseleave', 'button.myButton',function(){
    $(this).removeClass('fakeHover');
});

$(document).on('button.myButton, 'click', function(){
    $(this).mouseleave();
});

Осылайша сіз өзіңіздің қалыпты hover функциясын ұстап, тінтуірді тек түймелеріңізде «жылжыту» кезінде қолданасыз. Бәрі дерлік: барлығы тінтуірмен түймені басқаннан кейін, ол тек hover күйінде болмайды. Егер сіз басқан болсаңыз және көрсеткішті батырманың ішінен жылдам алсаңыз. Бірақ менің жағдайым бойынша өмір сүре аламын.

2
қосылды

Сіздің JS кодты бетке қосыңыз:

document.body.className = 'ontouchstart' in document.documentElement ? '' : 'hover';

енді кез келген әуесқой алдында CSS-де осы сияқты hover класын қосыңыз:

.hover .foo:hover {}

Егер құрылғы жанасса, дене сыныбы бос болады, әйтпесе оның класы қозғалады және ережелер қолданылады!

1
қосылды
Мен үшін жұмыс істемеді, бірақ бұл жасады: document.body.className = 'ontouchstart' терезеде? '': 'hover';
қосылды автор drskullster, көзі

Мен жауаптардың қалған бөлігін оқып шыққаннан бері осылай ойладым. Тек сенсорлы, тышқан немесе гибридті пайдаланушыларды қолдауы керек.

Жылжыту әсеріне арналған жекелеген жылжу класын жасаңыз. Әдепкі бойынша, осы жылжыту класын біздің түймеге қосыңыз.

Біз сенсорлық қолдауға ие болуды анықтағымыз келмейді және басынан бастап барлық жылжыту әсерлерін өшіреміз. Басқа адамдар айтқандай, гибридтік құрылғылар танымал болып келеді; адамдар сенсорлық қолдауы болуы мүмкін, бірақ тышқанмен және керісінше пайдалануды қалайды. Сондықтан, пайдаланушы шынымен түймені тигізгенде, hover класын алып тастаңыз.

Келесі мәселе - пайдаланушы түймені тигізгеннен кейін тінтуірді пайдалану үшін қайтып оралғысы келсе не болады? Бұл мәселені шешу үшін, біз алып тастаған ағытпа класын қосу үшін қолайлы уақытты табуымыз керек.

Дегенмен, оны алып тастағаннан кейін бірден оны қайтадан қосуға болмайды, себебі әуеннің күйі әлі де белсенді. Біз сондай-ақ бүкіл батырманы жойып, қайта жасауды қаламаймыз.

Мәселен, hover күйін тексеру үшін бос уақытты күту алгоритмі (setInterval арқылы) туралы ойладым. Жүргізуші күйі өшірілгеннен кейін, біз hover классын қосып, бос емес күтуді тоқтатып, пайдаланушымыз тінтуірді немесе сенсорды пайдалана алатын бастапқы күйге келтіре аламыз.

Мен бос уақытты күтіп тұрғаны соншалықты жақсы емес, бірақ дұрыс оқиға болғанына сенімді емеспін. Мен оны мультфиляцияға қосуды қарадым, бірақ бұл өте күшті емес еді. Мысалы, түйме басылғаннан кейін ескерту шыққанда, тінтуірдің орны ауысады, бірақ мукеалу оқиғасы іске қосылмайды.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var button = document.getElementById('myButton');

button.ontouchstart = function(e) {
  console.log('ontouchstart');
  $('.button').removeClass('button-hover');
  startIntervalToResetHover();
};

button.onclick = function(e) {
  console.log('onclick');
}

var intervalId;

function startIntervalToResetHover() {
 //Clear the previous one, if any.
  if (intervalId) {
    clearInterval(intervalId);
  }
  
  intervalId = setInterval(function() {
   //Stop if the hover class already exists.
    if ($('.button').hasClass('button-hover')) {
      clearInterval(intervalId);
      intervalId = null;
      return;
    }
    
   //Checking of hover state from 
   //http://stackoverflow.com/a/8981521/2669960.
    var isHovered = !!$('.button').filter(function() {
      return $(this).is(":hover");
    }).length;
    
    if (isHovered) {
      console.log('Hover state is active');
    } else {
      console.log('Hover state is inactive');
      $('.button').addClass('button-hover');
      console.log('Added back the button-hover class');
      
      clearInterval(intervalId);
      intervalId = null;
    }
  }, 1000);
}
.button {
  color: green;
  border: none;
}

.button-hover:hover {
  background: yellow;
  border: none;
}

.button:active {
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='myButton' class='button button-hover'>Hello</button>
</div> </div>

Өңдеу: Мен тырысып көрген тағы бір әдіс - e.preventDefault() деп қоңырау шалу немесе ontouchend ішінде. Түймешік басылған кезде жылжыту әсерін тоқтату көрінеді, бірақ түймені басу анимациясын тоқтатады және түймені басқан кезде onclick функциясының шақырылуын болдырмайды, сондықтан сіз оларды қолмен ontouchstart немесе ontouchend өңдегіші арқылы қоңырау шалуыңыз керек. Таза шешім емес.

1
қосылды

It was helpful for me: link

function hoverTouchUnstick() {
   //Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
       //Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
           //Verify if cssRules exists in sheet
            if(sheet.cssRules) {
               //Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                   //Verify rule has selector text
                    if(rule.selectorText) {
                       //Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}
1
қосылды
Global ontouchstart оқиға өңдегішінен hoverTouchUnstick() шақырту керек. Және бұл шешім тамаша жұмыс істейтін еді.
қосылды автор Jusid, көзі

I could add a no-hover class ontouchend for each button, and make my CSS like >this: button:not(.no-hover):hover { background-color: blue; } but that's probably quite bad for performance, and doesn't handle >devices like the Chromebook Pixel (which has both a touchscreen and a mouse) >correctly.

Бұл дұрыс бастау нүктесі. Келесі қадам: Келесі оқиғаларға арналған nohover сыныбын қолдану/жою (jQuery-де көрсету)

buttonelement
 .on("touchend touchcancel",function(){$(this).addClass("nohover")})
 .on("touchstart mouseover",function({$(this).removeClass("nohover")});   

Ескерту: Егер сіз басқа сабақтарды қолдансаңыз, CSS-де (.novover) күткендей жұмыс істемейді. Оның орнына әдепкі мәнді бөлек анықтауды және апаратын мәнерді қайта жазу үшін маңызды тегті қосу керек:      .nohover {background-color: white! маңызды}

Бұл тіпті Chromebook Pixel (сенсорлы экран және тышқан сияқты) сияқты құрылғыларды дұрыс басқаруы керек! Менің ойымша, бұл басты кісі өлтіруші ...

1
қосылды

Darren Cooks-ге негізделген жауап, саусағыңызды басқа элементке ауыстырған кезде де жұмыс істейді.

See Find element finger is on during a touchend event

jQuery(function() {
    FastClick.attach(document.body);
});
// Prevent sticky hover effects for buttons on touch devices
// From https://stackoverflow.com/a/17234319
//
//
// Usage:
// ..
//
// Refactored from a directive for better performance and compability
jQuery(document.documentElement).on('touchend', function(event) {
  'use strict';

  function fix(sourceElement) {
    var el = $(sourceElement).closest('[touch-focus-fix]')[0];
    if (!el) {
      return;
    }
    var par = el.parentNode;
    var next = el.nextSibling;
    par.removeChild(el);
    par.insertBefore(el, next);
  }

  fix(event.target);
  var changedTouch = event.originalEvent.changedTouches[0];
 //http://www.w3.org/TR/2011/WD-touch-events-20110505/#the-touchend-event
  if (!changedTouch) {
    return;
  }
  var touchTarget = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
  if (touchTarget && touchTarget !== event.target) {
    fix(touchTarget);
  }
});

Codepen демо

0
қосылды

Бұл 2 қадамда керемет жұмыс істейді.

  1. Set your body tag to be like this <body ontouchstart="">. I'm not a fan of this "hack", but it allows Safari on iOS to react to touches instantly. Not sure how, but it works.

  2. Set up your touchable class like this:

    // I did this in SASS, but this should work with normal CSS as well
    
    // Touchable class
    .example {
    
       //Default styles
        background: green;
    
       //Default hover styles 
       //(Think of this as Desktop and larger)
        &:hover {
            background: yellow;
        }
    
       //Default active styles
        &:active {
            background: red;
        }
    
       //Setup breakpoint for smaller device widths
        @media only screen and (max-width: 1048px) {
    
           //Important!
           //Reset touchable hover styles
           //You may want to use the same exact styles as the Default styles
            &:hover {
                background: green;
            }
    
           //Important!
           //Touchable active styles
            &:active {
                background: red;
            }
        }
    }
    

Сіз сондай-ақ кез-келген анимацияны сіздің қол жетімді классыңыздан да жойғыңыз келуі мүмкін. Android Chrome iOS-ге қарағанда баяуырақ.

Сондай-ақ, егер қолданушы сыныпқа қол тигізгенде бетті айналдырса, белсенді күйде қолданылады.

0
қосылды

Бұл мен үшін жұмыс істеді: жаңа үлгідегі сәндеу стилін қойыңыз

.fakehover {background: red}

Содан кейін сыныпты қажет болғанда қосыңыз/алып тастаңыз

$(".someclass > li").on("mouseenter", function(e) {
  $(this).addClass("fakehover");
});
$(".someclass > li").on("mouseleave", function(e) {
  $(this).removeClass("fakehover");
});

Touchstart және оқиғалар оқиғаларын қайталаңыз. Немесе сіз қалаған нәтижеге жетуді қалайтын кез-келген оқиғалар, мысалы, сенсорлық экранда жылжу әсерінің өзгеруін қаладым.

0
қосылды

Фондық түсті : белсенді күйінде орната аласыз және : focus параметрін фонға қалдыруыңызға болады.

егер onfocus/ontouch арқылы өң түсі орнатсаңыз, түс стилі : focus күйі жойылғанға дейін сақталады. Фокусты жоғалтқан кезде, def bg-ды қалпына келтіру үшін onblur -де қалпына келтіру қажет.

0
қосылды
: hover және: белсенді CSS-ті алуға болады, ол мыналарды қамтиды: сізде проблема бар. Шын мәнінде, егер сіз фон түсі onfocus арқылы орнатсаңыз, фокус жоғалғаннан кейін түс стилі қалады. onlur-де қалпына келтіруді қажет етеді
қосылды автор G-Cyr, көзі
Сіз мұны өзіңіз тексергенсіз бе? Себебі бұл жұмыс істемейді.
қосылды автор Chris, көзі
Бірақ тінтуір пайдаланушыларына арналған жылжыту әсерін сақтағым келеді.
қосылды автор Chris, көзі

Сіз осылай әрекет ете аласыз.

javascript:

var isEventSupported = function (eventName, elementName) {
    var el = elementName ? document.createElement(elementName) : window;
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported && el.setAttribute) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
};

if (!isEventSupported('touchstart')) {
    $('a').addClass('with-hover');
}

css:

a.with-hover:hover {
  color: #fafafa;
}
0
қосылды

Менің жобаларымда не істегенімді Touch құрылғыларындағы : hover өзгерістерін қайтару болды:

.myhoveredclass {
    background-color:green;
}
.myhoveredclass:hover {
    background-color:red;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myhoveredclass:hover, .myhoveredclass:active, .myhoveredclass:focus {
        background-color:green;
    }
}

Барлық сынып атаулары мен көрсетілген түстер тек демонстрация мақсаттары үшін ;-)

0
қосылды

Мен үшін жұмыс істеген шешім:

html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Осы кодты мәнерлер кестесіне қосыңыз.

Мен сілтеме басылған кезде iOS Safari-да пайда болатын сұр фондан құтылуды қаладым. Бірақ бұл көп нәрсе істемейді. Енді бір батырманы басу арқылы (: hover pseudoclass!) Бірден ашылады! Мен оны тек iPad-да тексердім, ол басқа құрылғыларда жұмыс істейтінін білмеймін.

0
қосылды

Меніңше, ұқсас проблема үшін талғампаз (минимум) шешім таптым:

Using jQuery, you can trigger hover on body (or any other element), using .mouseover()

Сондықтан мен осы элементтің ontouchend іс-әрекетіне осылай ғана қосыламын:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var unhover = function() {
  $("body").mousover();  
};
.hoverable {
  width: 100px;
  height: 100px;
  background: teal;
  cursor: pointer;
}

.hoverable:hover {
  background: pink;
}
<div class="hoverable" ontouchend={unhover}></div>
</div> </div>

Бұл, алайда, тек қана жойылады: басқа элементтің сенсорлық оқиғасы іске қосылғаннан кейін элементтен псевдокласты апарыңыз, мысалы, жанап өту немесе басқа да жанасу

0
қосылды
Сіздің кодының үзіндісі үшін, мен оны ұстағаннан кейін шаршығы әлі күнге дейін қызғылт болып қалады. Менің ойымша, сіз осы мәселеде сұрақты шеше алмадыңыз ба?
қосылды автор Kevin Lee, көзі
Бұл шешім жұмыс істемейді. Алдымен, оқиға тудыру үшін дұрыс емес әдісті қолдандыңыз, .trigger() қолданыңыз. Екіншіден, мобильді сафариде де жұмыс істемейді.
қосылды автор xHocquet, көзі