터치 디바이스의 버튼에 대한 끈적거리는 호버 효과를 방지하는 방법
항상 보이는 이전 버튼과 다음 버튼으로 회전목마를 만들었습니다.이 버튼들은 호버 상태이고 파란색으로 바뀝니다.iPad와 같은 터치 장치에서는 호버 상태가 끈적거려서 버튼을 누른 후에도 파란색으로 유지됩니다.나는 그것을 원하지 않는다.
저는 추가할 수 있습니다.
no-hoversontouchend의 버튼에 내 과 같이 해,내 CSS다:button:not(.no-hover):hover { background-color: blue; }그러나 이는 성능에 상당히 좋지 않을 수 있으며 크롬북 픽셀(터치스크린과 마우스가 모두 있는)과 같은 장치를 올바르게 처리하지 못합니다.저는 추가할 수 있습니다.
touchdocumentElement내 내 CSS다.html:not(.touch) button:hover { background-color: blue; }하지만 그것은 터치와 마우스가 함께 있는 기기에서도 제대로 작동하지 않습니다.
입니다를 입니다.ontouchend것 같지는 하지만 그것은 불가능해 보입니다.다른 요소를 강조해도 호버 상태가 제거되지 않습니다.다른 요소를 수동으로 탭하는 것은 가능하지만 자바스크립트에서는 그것을 트리거할 수 없는 것 같습니다.
제가 찾은 모든 해결책은 완벽하지 않은 것 같습니다.완벽한 해결책이 있습니까?
CSS 미디어 쿼리 레벨 4의 이 부분은 2018년부터 널리 구현되었기 때문에 다음을 사용할 수 있습니다.
@media (hover: hover) {
button:hover {
background-color: blue;
}
}
같은 입력 )을 지원하는 "로///(: ) 합니다"를 할 때 이합니다.button"주위에 떠 있습니다."
이를 구현하지 않은 브라우저의 경우(또는 원래 답변 당시에는 구현하지 않은 브라우저의 경우), 이를 처리하기 위해 폴리필을 작성했습니다.이를 사용하여 위의 미래형 CSS를 다음과 같이 변환할 수 있습니다.
html.my-true-hover button:hover {
background-color: blue;
}
).no-touch 그리고 호버링 )하여의 할 수 .다.my-true-hover그에 따른 클래스:
$(document).on('mq4hsChange', function (e) {
$(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});
일시적으로 DOM에서 링크를 제거하여 호버 상태를 제거할 수 있습니다.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에는 다음과 같은 내용이 있습니다.
<a href="#" ontouchend="this.onclick=fix">test</a>
이것은 완벽한 해결책이 없는 일반적인 문제입니다.호버 동작은 마우스에 유용하고 대부분 터치에 해롭습니다.문제를 더욱 복잡하게 만드는 것은 크롬북 픽셀과 서피스처럼 터치와 마우스를 동시에 지원하는 장치들입니다.
제가 찾은 가장 깨끗한 해결책은 장치가 터치 입력을 지원하지 않는 것으로 판단되는 경우에만 호버 동작을 활성화하는 것입니다.
var isTouch = !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;
if( !isTouch ){
// add class which defines hover behavior
}
물론, 당신은 그것을 지원할 수 있는 장치에서 맴도는 것을 잃습니다.그러나 링크 자체보다 호버링이 더 큰 영향을 미치는 경우가 있습니다. 예를 들어 요소를 호버링할 때 메뉴를 표시하고자 할 수도 있습니다.이 방법을 사용하면 터치가 있는지 테스트하고 다른 이벤트를 조건부로 부착할 수 있습니다.
아이폰, 아이패드, 크롬북 픽셀, 서피스 등 다양한 안드로이드 기기에서 테스트를 해봤습니다.일반 USB 터치 입력(스타일러스 등)을 믹스에 추가했을 때 작동할지 장담할 수 없습니다.
호버를 지원하지 않는 장치의 호버 효과를 재정의할 수 있습니다.좋아요:
.my-thing {
color: #BADA55;
}
.my-thing:hover {
color: hotpink;
}
@media (hover: none) {
.my-thing {
color: #BADA55;
}
}
iOS 12에서 테스트 및 검증 완료
이 점을 지적해 주신 https://stackoverflow.com/a/50285058/178959 에 대한 해트 팁.
2020년부터 미디어 쿼리 내에 호버 스타일을 추가할 수 있습니다.
@media (hover: hover) and (pointer: fine) {
/* css hover class/style */
}
이 미디어 쿼리는 에뮬레이트하지 않는 브라우저에서는 스타일이 작동하므로 터치 브라우저에서는 작동하지 않음을 나타냅니다.
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;
}
::active될 는 없습니다.no-touch모바일과 데스크톱 모두에서 예상대로 작동하기 때문입니다.
$("#elementwithhover").click(function() {
// code that makes element or parent slide or otherwise move out from under mouse.
$(this).clone(true).insertAfter($(this));
$(this).remove();
});
모바일에서 끈적거리는 호버링을 처리하는 4가지 방법:다음은 동적으로 를 추가하거나 제거하는 방법입니다.can touch를 지정합니다 합니다.사용자가 터치와 마우스/트랙패드 사이를 전환할 수 있는 하이브리드 장치에서도 작동합니다.
<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>
제 나름대로 해결책을 올리려고 했는데, 누가 이미 올렸는지 확인해보니 @Rodney가 거의 다 한 것 같습니다.하지만, 적어도 제 경우에는, 그는 그것을 통일성 있게 만드는 마지막 결정적인 것을 놓쳤습니다.은을 .fakeHover /가를 mouseenter그리고.mouseleave사건 탐지는 하지만, 그 자체만으로도 거의 "genuine"와 같은 역할을 합니다.:hover에 있는 " 호버"할 수 있다는 제 말은, 테이블에 있는 요소를 두드리면 "떠난" 것을 감지하지 못해 "가짜 호버" 상태를 유지한다는 것입니다.
한 로 이었습니다.click탭 수동으로 를 실행하고, "" 를 을하고, 를합니다를 으로합니다.mouseleave.
이게 내 마지막 코드야,
.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마우스를 사용할 때 버튼을 간단히 "hovering"할 때 기능성을 제공합니다. 것:한 후,것,입니다로 되지 않는다는 입니다.에,입니다.hover상태. 버튼을 클릭하고 빠르게 포인터를 꺼냈을 때와 마찬가지입니다.하지만 저 같은 경우엔 그걸로 살 수 있어요.
이것은 제가 나머지 답을 공부한 후에 지금까지 생각해낸 것입니다.터치 전용, 마우스 전용 또는 하이브리드 사용자를 지원할 수 있어야 합니다.
호버 효과에 대해 별도의 호버 클래스를 만듭니다.기본적으로 이 호버 클래스를 단추에 추가합니다.
터치 지원을 감지하고 처음부터 모든 호버 효과를 비활성화하고 싶지 않습니다.다른 사람들이 언급한 바와 같이, 하이브리드 장치는 인기를 얻고 있습니다. 사람들은 터치 지원이 있을 수 있지만 마우스를 사용하고 싶어하거나 그 반대일 수도 있습니다.따라서 사용자가 실제로 버튼을 누를 때만 호버 클래스를 제거합니다.
다음 문제는 사용자가 버튼을 누른 후 다시 마우스를 사용하려면 어떻게 해야 합니까?이를 해결하기 위해서는 우리가 제거한 호버 클래스를 다시 추가할 수 있는 적절한 시기를 찾아야 합니다.
그러나 호버 상태가 계속 활성화되어 있기 때문에 제거 후 즉시 추가할 수는 없습니다.우리는 전체 버튼을 파괴하고 다시 만들고 싶지 않을 수도 있습니다.
그래서 저는 호버 상태를 확인하기 위해 바쁜 대기 알고리즘(setInterval 사용)을 사용하려고 생각했습니다.호버 상태가 비활성화되면 호버 클래스를 다시 추가하고 통화 대기를 중지하여 사용자가 마우스나 터치를 사용할 수 있는 원래 상태로 되돌릴 수 있습니다.
바쁘지 않은 건 알지만 적당한 행사가 있을지 모르겠네요.마우스 휴가 이벤트에 다시 추가하는 것을 고려해 보았지만, 그다지 강력하지 않았습니다.예를 들어 버튼을 누른 후 경고가 나타나면 마우스 위치는 이동하지만 마우스 이탈 이벤트는 트리거되지 않습니다.
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>편집: 제가 시도한 또 다른 접근 방법은 전화를 거는 것입니다.e.preventDefault()접촉 시작 또는 접촉 중에 버튼을 것처럼 , , 되지 않도록 .버튼을 터치하면 호버 효과가 멈추는 것처럼 보이지만 버튼 클릭 애니메이션을 멈추고 버튼을 터치하면 온클릭 기능이 호출되지 않기 때문에 온터치 시작이나 온터치 핸들러에서 수동으로 호출해야 합니다.그다지 깨끗한 해결책이 아닙니다.
저에게 도움이 되었습니다: 링크
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");
}
}
}
}
}
}
이 JS 코드를 페이지에 추가합니다.
document.body.className = 'ontouchstart' in document.documentElement ? '' : 'hover';
이제 모든 호버가 호버 클래스를 추가하기 전에 CSS에서 다음과 같이 입력합니다.
.hover .foo:hover {}
장치가 터치 상태이면 본문 클래스가 비어 있고 그렇지 않으면 해당 클래스가 호버링되고 규칙이 적용됩니다!
각 버튼에 대해 터치에 노호버 클래스를 추가하고 CSS를 다음과 같이 만들 수 있습니다. 버튼:not(.no-hover):hover {background-color:blue; }. 하지만 이는 성능에 상당히 좋지 않을 것이며 크롬북 픽셀(터치스크린과 마우스가 모두 있는)과 같은 >장치를 올바르게 처리하지 못합니다.
여기가 올바른 출발점입니다.다음 단계: 다음 이벤트에 nohover 클래스 적용/제거(jQuery로 데모)
buttonelement
.on("touchend touchcancel",function(){$(this).addClass("nohover")})
.on("touchstart mouseover",function({$(this).removeClass("nohover")});
참고: 버튼 요소에 다른 클래스를 적용하려면 CSS의 :not(.nohover)가 예상대로 더 이상 작동하지 않습니다.대신 호버 스타일을 덮어쓰려면 기본값과 !important 태그를 사용하여 별도의 정의를 추가해야 합니다. .nohover{ background-color: white!important}
이것은 (터치스크린과 마우스가 모두 있는) Chromebook Pixel과 같은 장치도 올바르게 다룰 수 있어야 합니다!내 생각엔 이게 중요한 퍼포먼스 킬러라고 생각하지 않아요
효과적인 솔루션:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
이 코드를 스타일시트에 추가합니다.
링크 클릭 시 iOS 사파리에 나타나는 회색 배경을 없애고 싶었습니다.하지만 그것은 더 많은 것을 할 것으로 보입니다. 버튼 릭(함) ):hoverdoclass!) 바로 오픈!아이패드에서만 테스트해봤는데 다른 기기에서도 가능할지 모르겠네요.
공유하고 싶은 좋은 솔루션이 있습니다.먼저 사용자가 다음과 같이 모바일에 있는지 감지해야 합니다.
var touchDevice = /ipad|iphone|android|windows phone|blackberry/i.test(navigator.userAgent.toLowerCase());
그러면 추가만 하면 됩니다.
if (!touchDevice) {
$(".navbar-ul").addClass("hoverable");
}
CSS에서:
.navbar-ul.hoverable li a:hover {
color: #fff;
}
저도 비슷한 문제를 겪었습니다. 데스크톱 화면 크기/마우스 기반 장치에서 모든 화면 크기에 대해 애플리케이션이 호환되었으며, 나중에 터치 기반 장치가 스티키 호버(sticky-hover)로 알려진 상태를 유발하고 있으며, 터치 기반 장치 사용자에게 앱이 제대로 작동하는 데 장애가 된다는 것을 깨달았습니다.
저희 앱에서 SCSS를 사용하고 있었는데, 터치 기반의 기기를 관리하기 위해 믹신을 정의했습니다.
@mixin hover-support {
@media not all and (pointer: coarse) {
&:hover {
@content;
}
}
}
그리고 나서 나의 모든 CSS 수업을 아래의 스니펫 아래에 두었습니다.
@include hover-support() {
// Your css-classes or css that you want to apply on those devices that support hover.
}
예를 들어 아이콘을 애니메이션화하는 클래스가 있었는데, CSS에서 볼 수 있듯이 아이콘을 호버하면 트리거되곤 했지만, 터치 기반 장치에서는 끈적거리는 호버 효과에 영향을 받고 있었고, 호버를 지원하는 장치에만 적용되도록 @include hover-support() 안에 배치했습니다.
@include hover-support() {
.animate-icon {
-webkit-transition: all 0.2s;
transition: all 0.2s;
&:hover {
transform: scale(1.3);
filter: brightness(85%);
cursor: pointer;
}
}
}
여기 개발자가 CSS를 편집하거나 새로운 CSS 규칙을 작성할 필요가 없는 간단한 자바스크립트 코드가 있습니다.로 부트스트랩 쓴 입니다.class="btn" 모든 , 즉합니다.
단계는 다음과 같습니다.
- 이것이 터치 디바이스인지 확인합니다.
- CSS 합니다의 합니다.
document.styleSheets - 두 을 모두 포함하는
.btn그리고.:hover
의 ..btn :hoverCSS 규칙은 버튼에 시각적 호버 효과가 없도록 보장합니다.
1단계: 터치 장치 감지
이 있는지 합니다.(hover: none):
const hasMatchMedia = typeof window.matchMedia !== 'undefined';
/**
* determine if device is touch-capable
* true - device is touch-capable
* false - device is not touch-capable
* null - unable to determine touch capability
* @return {null|boolean}
*/
const hasTouch = () => {
if (hasMatchMedia) {
return window.matchMedia('(hover: none)').matches;
}
return null;
};
2단계: 'btn'과 ':hover'를 포함하는 CSS 규칙 삭제
/**
* remove all CSS rules contaning both '.btn' and ':hover'
* @return {number} count of rules deleted
*/
function removeBtnHovers () {
let rulesDeleted = 0;
// recursively delete '.btn:hover' rules
function recursiveDelete (rules, styleSheet) {
if (typeof rules === 'undefined' ||
typeof rules.length === 'undefined' ||
rules.length <= 0) {
return;
}
// iterate in reverse order,
// deleting any rule containing both '.btn' and ':hover'
const ruleLen = rules.length;
for (let i = ruleLen - 1; i >= 0; i--) {
const rule = rules[i];
if (typeof rule.cssRules === 'undefined') {
// a standard rule, evaluate it
const cssText = rule.cssText;
if (typeof cssText === 'string' &&
cssText.includes('.btn') &&
cssText.includes(':hover')) {
styleSheet.deleteRule(i);
rulesDeleted++;
}
} else {
// rule contains cssRules, iterate over them
recursiveDelete(rule.cssRules, rule);
}
}
}
// iterate over all style sheets in document
for (const styleSheet of document.styleSheets) {
let rules = styleSheet.cssRules;
if (!rules) { continue; }
recursiveDelete(rules, styleSheet);
}
return rulesDeleted;
}
terrymorse.com 에서 라이브 데모를 합니다.
에 수 .:activee니다:focus사실적인 배경
onfocus/ontouch, .:focus상태가 사라졌습니다.
.onblur초점을 잃었을 때 defut bg를 복원하기 위해.
이것은 나에게 효과가 있었습니다: 호버 스타일링을 새로운 클래스에 넣으십시오.
.fakehover {background: red}
그런 다음 필요에 따라 클래스를 추가/제거합니다.
$(".someclass > li").on("mouseenter", function(e) {
$(this).addClass("fakehover");
});
$(".someclass > li").on("mouseleave", function(e) {
$(this).removeClass("fakehover");
});
터치 시작 및 터치 이벤트에 대해 반복합니다.또는 원하는 결과를 얻고자 하는 이벤트가 무엇이든 간에, 예를 들어, 저는 호버 효과를 터치 스크린에서 토글하기를 원했습니다.
비슷한 문제에 대해 우아한(최소 js) 해결책을 찾은 것 같습니다.
jQuery 를하면 body() 에서를 에서 호버링을 수 ..mouseover()
이에 합니다.ontouchend다음과 같은 이벤트:
var unhover = function() {
$("body").mousover();
};.hoverable {
width: 100px;
height: 100px;
background: teal;
cursor: pointer;
}
.hoverable:hover {
background: pink;
}<div class="hoverable" ontouchend={unhover}></div>그러나 스와이프 또는 다른 터치와 같은 다른 터치 이벤트가 트리거된 후 요소에서:hover pseudoclass만 제거됩니다.
Darren Cooks의 답변을 바탕으로 다른 요소 위로 손가락을 움직일 경우에도 효과가 있습니다.
터치 이벤트 중 요소 찾기 손가락이 켜져 있음을 참조하십시오.
jQuery(function() {
FastClick.attach(document.body);
});
// Prevent sticky hover effects for buttons on touch devices
// From https://stackoverflow.com/a/17234319
//
//
// Usage:
// <a href="..." touch-focus-fix>..</a>
//
// 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);
}
});
이런 식으로 해보세요.
자바스크립트:
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;
}
제가 지금까지 프로젝트에서 한 일은 그 프로젝트를 되돌리는 것이었습니다.: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;
}
}
시연용으로만 모든 클래스 이름과 이름이 지정된 색상 ;-)
이것은 2단계로 완벽하게 작동합니다.
처럼 하세요.
<body ontouchstart="">핵의할 수 저는 이 "핵"의 팬은 아니지만 iOS의 사파리는 터치에 즉각적으로 반응할 수 있습니다.어떻게 하는지는 모르겠지만, 효과는 있습니다.터치 가능한 클래스를 다음과 같이 설정합니다.
// 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; } } }
터치 가능한 클래스의 애니메이션도 삭제할 수 있습니다.안드로이드 크롬은 iOS보다 조금 느린 것 같습니다.
클래스를 터치하는 동안 사용자가 페이지를 스크롤하는 경우에도 활성 상태가 적용됩니다.
끈적이거나 달라붙은 것들이 있습니다.:hover :focus :active다 할 수 .<meta name="viewport" content="width=device-width">브라우저가 화면을 조작하려고 할 때.
HTML 클래스를 스왑하면 가능합니다.특히 대형 이미지 링크 등의 경우 전체 요소를 제거하는 것보다 결함이 발생하기 쉽습니다.
터치(터치 이동)로 스크롤할 때 호버 상태가 트리거되도록 할지, 시간 초과를 추가하여 지연시킬지도 결정할 수 있습니다.
는 인 HTML 입니다와 입니다.<a class='hover'></a>새로운 행동을 구현하는 요소들에 대해.
HTML
<a class='my-link hover' href='#'>
Test
</a>
CSS
.my-link:active, // :active can be turned off to disable hover state on 'touchmove'
.my-link.hover:hover {
border: 2px dotted grey;
}
JS(jQuery 포함)
$('.hover').bind('touchstart', function () {
var $el;
$el = $(this);
$el.removeClass('hover');
$el.hover(null, function () {
$el.addClass('hover');
});
});
예
https://codepen.io/mattrcouk/pen/VweajZv
-
하지만 마우스와 터치가 모두 가능한 장치가 없어서 제대로 테스트를 할 수 없습니다.
만약 당신이 CSS-in-JS 사람이고 이 문제에 대한 해결책을 찾고 있다면, 여기 있습니다.
JS 미디어 쿼리를 사용하여 CSS-in-JS에서 미디어 쿼리를 구현할 수 있습니다.
예를 들어, 다음 토막글은 화면 크기가 768px보다 큰 경우에만 버튼에 호버 효과를 추가합니다.
tag: {
cursor: "pointer",
"&:hover, &:active": window.matchMedia('(min-width: 768px)').matches ? {
transform: "scale(1.3)"
} : null
}
제게 해결책은 터치 후 노드를 복제하고 교체하는 것이었습니다.나는 이것을 하는 것을 싫어하지만 심지어 요소를 오프셋으로 다시 칠하려고 노력합니다.키가 작동하지 않았습니다.
let cloneNode = originNode.cloneNode( true );
originNode.parentNode.replaceChild( cloneNode, originNode );
자바스크립트를 사용하기에는 너무 쉽습니다.그것은 초점 문제인 호버 문제가 아닙니다.CSS를 사용하여 포커스를 맞출 때 아웃라인을 없음으로 설정합니다.
.button:focus {
outline: none;
}
Kevin Lee의 답변은 다른 곳에서는 볼 수 없었던 마지막 부분을 포함하고 있으며, 작업량이 거의 없는 멀티 입력 시스템(터치스크린 노트북과 같은)을 위해 이 문제를 해결하는 데 도움이 되었습니다.
function f() {
console.log("Hi");
}button:hover {
border: 2px solid blue;
}<button type="button" onclick="f()" ontouchend="f(); event.preventDefault()">
Say Hi
</button>다중 입력 장치에서 이 작업을 실행하면 마우스 포인터로 맴도는 경우 파란색 테두리가 생성되지만 터치 스크린의 버튼을 누르면 테두리가 생성되지 않습니다.
유일한 단점은 UI 프레임워크의 다른 클릭 기능(리플 애니메이션 등)이 작동하지 않을 가능성이 높다는 것입니다.직접 수동으로 해고할 수도 있습니다. 저 같은 경우는 처음부터 문제가 되지 않았거든요.
언급URL : https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices
'itsource' 카테고리의 다른 글
| 날짜 열을 내림차순으로 색인하는 것이 좋습니까? (0) | 2023.09.19 |
|---|---|
| 지정된 서비스 ID 이전에 모든 데이터 선택 (0) | 2023.09.19 |
| MySQL Workbench 테이블 데이터 가져오기 마법사 매우 느림 (0) | 2023.09.19 |
| 워드프레스에서 페이지 새로 고침 없이 연락처 양식 7을 제출하는 방법은? (0) | 2023.09.19 |
| Laravel join 쿼리 AS (0) | 2023.09.19 |