होवर क्षमता का पता लगाएं

Question

: होवर सीएसएस छद्म-वर्ग स्पर्श उपकरणों पर अच्छी तरह से काम नहीं करता है। होवर राज्य तब तक चिपक जाता है जब तक कि कुछ और छुआ न जाए। इसलिए हमारे वेब एप्लिकेशन में, हम संपर्क क्षमता के साथ ब्राउज़रों/उपकरणों का पता लगाने के Modernizr का उपयोग करें, और हम उन मामलों में मंडराना राज्यों को निष्क्रिय:

.no स्पर्श .button: मंडराना {...}

यह हो जाता है एक हाइब्रिड डिवाइस पर एक समस्या जो एक टचस्क्रीन और एक पॉइंटर डिवाइस, जैसे कि माउस या टचपैड दोनों का समर्थन करती है। Modernizr पता लगाता है कि यह स्पर्श-सक्षम है और माउस का उपयोग करते समय कोई भी होवर राज्य काम नहीं करता है।

टचस्क्रीन की बजाय माउस या अन्य पॉइंटर डिवाइस की उपस्थिति का पता लगाने के लिए और अधिक उपयोगी होगा। लेकिन मुझे ऐसा कुछ खोजने में असमर्थ है।

कोई सुझाव?

Answer 1

आप jQueries कोशिश कर सकते हैं .mouseover() .mouseenter() .mouseout() .mouseleave()

इम यकीन नहीं करता है, तो यह आपके सवाल का जवाब है, लेकिन इस होवर के बारे में जा रहा है और पता लगाने के लिए जब एक पर एक अलग तरीका है "पॉइंटर" कुछ पर प्रवेश करता है। इसके अलावा आप अपने लिए मीडिया प्रश्नों का उपयोग कर सकते हैं: अपने सीएसएस में होवर करें, और मुझे लगता है, उन्हें बंद कर दें। या उपयोगकर्ताओं के स्क्रीन आकार की एक निश्चित चौड़ाई पर कुछ और करें। 800px एक आईपैड आकार की तरह कुछ है। नीचे कुछ कोड है, मुझे उम्मीद है कि यह काम करता है!

$(document).ready(function(){ 
 
    $(".box").mouseover(function(){ 
 
    var duhbox = $(".box").addClass("black"); 
 
    duhbox.animate({borderRadius: "50px"}); 
 
    }); 
 
    $(".box").mouseout(function(){ 
 
    var goBack = $(".box").removeClass("black"); 
 
    goBack.animate({borderRadius: "0px"}); 
 
    }); 
 
});

.box{ 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: royalblue; 
 
    border: 1px solid black; 
 
} 
 

 
.black{ 
 
    background-color: black; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

अगर यह काम नहीं करता है कि आपने इसे करना चाहता था। मैं अन्य तरीकों के बारे में सोचता हूँ!

Answer 2

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन Googlers यहां उतरने के लिए, इस मीडिया क्वेरी काम करेगा:

@media not all and (hover: none) { 
    .hoverspecificstyles:hover { 
    display: block; 
    } 
} 

से this answer