tl; dr এটি ব্যবহার করুন: https://jsfiddle.net/57tmy8j3/
কেন বা কী কী বিকল্প রয়েছে তা যদি আপনি আগ্রহী হন তবে পড়ুন।
তাত্ক্ষণিকভাবে - অপসারণ: জেএস ব্যবহার করে শৈলীগুলি হোভার করুন
আপনি :hoverজাভাস্ক্রিপ্ট ব্যবহার করে সমস্ত সিএসএস বিধি মুছে ফেলতে পারেন । এটি সিএসএস স্পর্শ না করা এবং এমনকি পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ হওয়ার সুবিধা রয়েছে।
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
সীমাবদ্ধতা: স্টাইলশিটগুলি অবশ্যই একই ডোমেনে হোস্ট করা উচিত (যার অর্থ কোনও সিডিএন নেই)। সারফেস বা আইপ্যাড প্রো এর মতো মিশ্র মাউস এবং টাচ ডিভাইসে হভারগুলি অক্ষম করে যা ইউএক্সকে ব্যথা করে।
সিএসএস-কেবল - মিডিয়া ক্যোয়ারী ব্যবহার করুন
আপনার সমস্তগুলি রাখুন @media: একটি ব্লকে নিয়ম করুন :
@media (hover: hover) {
a:hover { color: blue; }
}
বা বিকল্পভাবে, আপনার সমস্ত হোভার নিয়ম ওভাররাইড করুন (পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
সীমাবদ্ধতা: ওয়েবভিউ ব্যবহার করার সময় কেবলমাত্র আইওএস 9.0+, ক্রোম অ্যান্ড্রয়েড বা অ্যান্ড্রয়েড 5.0+ এ কাজ করে। hover: hoverপুরানো ব্রাউজারগুলিতে হোভার ইফেক্টগুলি ভেঙে দেয়, hover: noneপূর্বনির্ধারিত সমস্ত সিএসএস বিধিগুলি ওভাররাইড করা দরকার। উভয়ই মিশ্র মাউস এবং টাচ ডিভাইসের সাথে বেমানান ।
সর্বাধিক শক্তিশালী - জেএসের মাধ্যমে স্পর্শ সনাক্ত করুন এবং সিএসএস প্রিপেন্ড করুন: নিয়মিতভাবে হোভার করুন
এই পদ্ধতিটির সাথে সমস্ত হোভার নিয়মগুলি প্রিপেন্ডিং করা দরকার body.hasHover। (বা আপনার পছন্দের শ্রেণীর নাম)
body.hasHover a:hover { color: blue; }
hasHoverবর্গ ব্যবহার যোগ করা যেতে পারে hasTouch()প্রথম উদাহরণ থেকে:
if (!hasTouch()) document.body.className += ' hasHover'
যাইহোক, পূর্ববর্তী উদাহরণগুলির মতো মিশ্র স্পর্শ ডিভাইসের সাথে এটির একই ঘাটতি রয়েছে, যা আমাদের চূড়ান্ত সমাধানের দিকে নিয়ে আসে। যখনই কোনও মাউস কার্সার সরানো হবে তখনই হোভার ইফেক্টগুলি সক্ষম করুন, যখনই কোনও স্পর্শ সনাক্ত হয় তখন হোভার ইফেক্টগুলি অক্ষম করুন।
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
function updateLastTouchTime() {
lastTouchTime = new Date()
}
document.addEventListener('touchstart', updateLastTouchTime, true)
document.addEventListener('touchstart', disableHover, true)
document.addEventListener('mousemove', enableHover, true)
enableHover()
}
watchForHover()
এটি যে কোনও ব্রাউজারে মূলত কাজ করা উচিত এবং প্রয়োজন অনুসারে হোভার শৈলীগুলিকে সক্ষম / অক্ষম করে।
পুরো উদাহরণটি এখানে - আধুনিক: https://jsfiddle.net/57tmy8j3/
উত্তরাধিকার (পুরানো ব্রাউজারগুলির সাথে ব্যবহারের জন্য): https://jsfiddle.net/dkz17jc5/19/