"निरीक्षण" एक मंडराना तत्व?


100

नोट: मैंने इसी तरह के धागे पढ़े हैं, लेकिन कोई भी मेरा मुद्दा नहीं है - मैं इस पर ठीक क्लिक कर सकता हूं, बस फिर गायब हो जाता है।

मुझे Chrome में एक अमूल्य उपकरण "इंस्पेक्ट एलिमेंट" मिल रहा है, हालाँकि मेरा नवीनतम फ़ॉरेस्ट है क्योंकि मैं सीखता हूं कि आप में से कई ने पहले से ही मेरे पास मेरे नेवी बार पर एक तत्व के लिए एक सब-मेन्यू बनाने के तरीके देखे हैं, जो कि इसके नीचे होवर करता है। मूल वस्तु।

पॉपअप (या नीचे) काफी स्टाइल नहीं है कि मैं कैसे चाहूंगा, इसलिए मैं राइट-क्लिक> तत्व का निरीक्षण करता हूं कि वास्तव में कहां से आ रहा है, और मेरे इच्छित प्रभाव को प्राप्त करने का एक बेहतर विचार प्राप्त करें।

हालाँकि, जैसे ही मैं अपने माउस को मेनू से दूर ले जाता हूँ, वह चला जाता है।

इसलिए मैं निरीक्षण फलक में विभिन्न तत्वों का चयन नहीं कर सकता, और देख सकता हूं कि एक ही समय में किस क्षेत्र को हाइलाइट किया गया है।

क्या मेनू को बदले बिना इसके चारों ओर एक रास्ता है, ताकि एक बार सक्रिय होने के बाद यह "पॉप अप" बना रहे?


2
इस तरह की स्थितियों में, मैं आमतौर पर पृष्ठ पर एक अस्थायी संशोधन करने के लिए कंसोल का उपयोग करता हूं, जैसे mouseleaveकि मूल मेनू से घटना को निकालना । उप-मेनू को तब भी खुला रहना चाहिए जब आप अपने माउस को मूल मेनू से दूर ले जाते हैं।
jababey

क्रोम अब इसका समर्थन करता है। UI तत्व चुनें (उदाहरण के लिए टैग)> तत्व का निरीक्षण करें> शैलियाँ टैब, फ़िल्टर बॉक्स के बगल में एक ": hov" अनुभाग है। इसे क्लिक करें। अब आप होवर चेकबॉक्स का चयन कर सकते हैं और देख सकते हैं कि क्या शैली होवर पर लोड होती है।
धानुका

जवाबों:


69

यदि hoverप्रभाव CSSतब हां के साथ दिया जाता है, तो मैं इसे प्राप्त करने के लिए सामान्य रूप से दो विकल्पों का उपयोग करता हूं:

एक, के लिए जब माउस छोड़ : ओपन डॉक की गई विंडो में निरीक्षक और अपनी पहुंच जब तक चौड़ाई बढ़ाने , तो राइट क्लिक करें और पॉपअप मेनू निरीक्षक क्षेत्र से अधिक होना चाहिए ... फिर जब तुम निरीक्षक दृश्य पर माउस ले जाएँ , रखें दस्तावेज़ में सक्रिय।seehover effecthover area
HTML elementhover effect

यहां छवि विवरण दर्ज करें

दो, के लिए माउस खत्म नहीं हुआ है, भले ही , निरीक्षक को खोलते हैं, के लिए जाना और ऊपर दाईं ओर आइकन कि कहते हैं में क्लिक करें (एक तीर के साथ बिंदीदार आयत) ... वहाँ आप मैन्युअल रूप से सक्रिय कर सकते हैं (दूसरों के बीच) के साथ चेकबॉक्स प्रदान किया गया।keephover effectHTML elementStyles TABToggle Element StateHover Event

यहां छवि विवरण दर्ज करें

यदि यह बिल्कुल स्पष्ट नहीं है, तो मुझे बताएं और मैं कुछ स्क्रीनशॉट जोड़ सकता हूं। संपादित : स्क्रीनशॉट जोड़ा गया।

और अंत में और के रूप में मैं शुरुआत में कहते हैं, मैं सिर्फ यह करने के लिए सक्षम है, तो हो सकता है hoverके साथ सेट कर दिया जाता CSS:HOVER... जब आप नियंत्रित hover stateसाथ jQuery.onMouseOverउदाहरण के लिए, केवल काम करता है (कभी कभी), विधि से एक।

आशा करता हूँ की ये काम करेगा।


4
आपका पहला समाधान एक अच्छा समाधान है, और मेरे पास इसे बेहतर बनाने का एक तरीका है: ठीक होवर किए गए तत्व पर क्लिक करें, माउस को पूरी तरह से "इंस्पेक्टर ज़ोन" पर ले जाएँ, और फिर कीबोर्ड कीज़ के साथ नेविगेट करें और "इंस्पेक्ट एलिमेंट" पर एंटर करें। "। तत्व को मँडरा रखा जाएगा। के रूप में अपने दूसरे समाधान के लिए, हाँ, (या संदर्भ मेनू का उपयोग करके :hover) स्पष्ट रूप से सही समाधान होना चाहिए था, लेकिन दुर्भाग्य से यह क्रोम / फ़ायरफ़ॉक्स पर तब तक काम नहीं किया है जब तक मैं याद कर सकता हूं ...
गिल्ड बार्नर

मैं विंडोज में ऐसा करने के लिए इस्तेमाल किया गया था, लेकिन मैक में यह चाल काम नहीं करती है, क्या किसी ने मैक पर इसका कोई रास्ता खोज लिया है? ऐसा लगता है कि यह "संचार करता है" माउस की घटनाओं को खिड़की पर ले जाता है, भले ही माउस निरीक्षक या उप-मेनू में हो
santiago arizti

@ गिलाबनेर ने आपके प्रस्तावित शॉर्टकट के लिए धन्यवाद दिया, यह मेरे लिए काम कर गया। मुझे नहीं पता कि यह सिर्फ मेरे पीसी पर एक समस्या है या नहीं, लेकिन मैं कीबोर्ड के माध्यम से चयनित मेनू विकल्प और शॉर्टकट कुंजी (ctrl-shift-I) नहीं देख सकता, जबकि ड्रॉपडाउन मेनू दिखाई नहीं देता है , इसलिए चूंकि निरीक्षण तत्व ड्रॉपडाउन पर अंतिम विकल्प है, इसलिए मैंने अंतिम आइटम के चारों ओर लपेटने और प्रवेश करने के लिए अप-एरो कुंजी का उपयोग किया, और यह काम किया।
बिल हिलमैन

इस समय लगता है कि :hoverविकल्प टॉगल क्लासेस ऑप्शन में है
सग्निक प्रधान

151

यदि होवर को जेएस द्वारा ट्रिगर किया जाता है, तो कीबोर्ड के माध्यम से स्क्रिप्ट निष्पादन को रोकें। यह अन्य उत्तरों के सुझाव की तुलना में DOM को फ्रीज़ करने का एक बहुत सरल तरीका है।

यहां बताया गया है कि आप इसे क्रोम में कैसे करते हैं। मुझे यकीन है कि फ़ायरफ़ॉक्स की एक समान प्रक्रिया है:

  1. डेवलपर टूल खोलें और सूत्रों पर जाएं।
  2. स्क्रिप्ट निष्पादन को रोकने के लिए शॉर्टकट पर ध्यान दें- F8

    स्क्रिप्ट का निष्पादन रोकें

  3. दिखाई देने के लिए तत्व प्राप्त करने के लिए UI के साथ सहभागिता करें।

  4. मारो F8
  5. अब आप अपने माउस को चारों ओर घुमा सकते हैं, डोम का निरीक्षण कर सकते हैं, जो भी हो। तत्व वहीं रहेगा।

3
यहां दी जाने वाली अन्य विधियां बहुत सारे संदर्भों में काम नहीं करती हैं जहां यह होता है।
एड स्टब

उत्तम। इस पोस्ट को खोजने से पहले किसी कारण से F8 काम नहीं किया। अब मैंने इसे उसी पृष्ठ पर फिर से आज़माया जिसका मैं निदान कर रहा हूँ, और इसने काम किया। (cwl)
आकर्षित

2
बहुत बढ़िया। मुझे लगता है कि यह सबसे अच्छा तरीका है।
वरुण मेहता

1
सफारी के लिए यह Debuggerटैब है
user2661518

6
यह मेरे लिए काम नहीं किया। के बाद F8, स्क्रीन जमा देता है और किसी भी तत्व का चयन नहीं कर सकता है। मेरा वर्कअराउंड प्रेस करना है F8, Elementsटैब पर स्विच करना है , फिर उन शब्दों को खोजना है जो होवर तत्व पर हैं।
एंग्रीहैकर

32

मेरे लिए जो काम किया गया वह उस विशेष टैग का चयन करना है जिसे मैं निरीक्षण करना चाहता था और यह करना चाहता हूं:

यहां छवि विवरण दर्ज करें

उपरोक्त करने के बाद, मैं फिर से सामान्य रूप से चयन करूंगा कि एक टैग तब ड्रॉपडाउन स्वचालित रूप से बना रहेगा, तब भी जब मैं अन्य स्थानों जैसे निरीक्षण तत्व, इत्यादि के लिए माउसओवर करता हूं।

जब आप सामान्य स्थिति पर वापस जाने के लिए मेनू ड्रॉपडाउन तत्वों का निरीक्षण कर रहे हैं, तो आप ब्राउज़र को ताज़ा कर सकते हैं।

उम्मीद है की यह मदद करेगा। :)


5
प्रतिभाशाली :)। यह जावास्क्रिप्ट द्वारा प्रकट होवर का निरीक्षण करने की अनुमति देता है।
एल्वूडप

1
यह मेरे लिए मूल जवाब से बेहतर काम किया।
विक्टर

14

आप इसे जावास्क्रिप्ट कंसोल में भी कर सकते हैं:

$('#foo').trigger('mouseover');

एक "होवर" स्थिति में तत्व को "फ्रीज" करेगा।


7

यहां बताया गया है कि क्रोम में मैं कोई सीएसएस परिवर्तन या जेएस ठहराव के साथ ऐसा कैसे करता हूं (मैं मैक पर हूं और अगर आपके पास पीसी नहीं है तो आप जीत पर चल रहे हैं):

  1. अपने डेवलपर कंसोल को खोलें।
  2. होवर निरीक्षण उपकरण को अभी तक सक्षम न करें, लेकिन इसके बजाय अपने माउस को ऊपर ले जाकर अपने वांछित उप मेनू को खोलें।
  3. हिट Command+ Shift+ C(मैक) या Ctrl+ Shift+ C(विन / लिनक्स)

अब होवर निरीक्षण उपकरण उन तत्वों पर लागू होगा जो आपने अपने उप-नौसेना में खोले हैं।


4

यह निश्चित नहीं है कि क्या यह पिछले ब्राउज़र के संशोधन में मौजूद था, लेकिन मुझे यह बेहद सरल विधि लगी।

क्रोम या फ़ायरफ़ॉक्स में इंस्पेक्टर खोलें, जिस तत्व में आप रुचि रखते हैं उस पर राइट क्लिक करें और उचित विकल्प चुनें (इस मामले में: प्रेमी)। यह संबंधित CSS को ट्रिगर करेगा।

क्रोमियम में मेनू खोलना फ़ायरफ़ॉक्स में एक ही मेनू खोलना

फ़ायरफ़ॉक्स 55 और क्रोमियम 61 से स्क्रीनशॉट।


2

बहुत बढ़िया सामान!

उस सलाह के लिए आपको धन्यवाद। मुझे उन विशेषता सेटिंग्स के बारे में बड़े पैमाने पर उपयोगी जानकारी नहीं थी।

शब्दों में एक छोटे से संशोधन के रूप में मैं उस प्रक्रिया को निम्नानुसार समझाऊंगा:

  • उस तत्व पर राइट क्लिक करें जिसे आप स्टाइल करना चाहते हैं

    • 'निरीक्षण' उपकरण खोलें

    • दाहिने हाथ की ओर, छोटी शैलियाँ टैब पर जाएँ

    • CSS स्टाइलशीट सामग्री के ऊपर पाया गया

    • .Hov विकल्प का चयन करें - यह आपको चयनित HTML तत्व के लिए उपलब्ध सभी सेटिंग्स देगा

    • निष्क्रिय होने के लिए सभी विकल्पों पर क्लिक करें और बदलें

    • अब उस स्थिति का चयन करें, जिसे आप ट्विक करना चाहते हैं - इनमें से किसी पर सक्रिय होने पर, आपकी स्टाइलशीट आपको सीधे उन सेटिंग्स पर ले जाएगी:

शैलियाँ - ट्वीकिंग फ़िल्टर - इंटरएक्टिव तत्व

यह जानकारी मेरे लिए एक जीवनसाथी थी, विश्वास नहीं होता कि मैंने इसके बारे में अभी सुना है!


क्रोम के लिए यह सबसे अच्छा तरीका था!
धीरे

1
महान, क्या मेरी प्रतिक्रिया आपके लिए मददगार थी?
डैन हैडॉक

0

सीएसएस को बदल दें ताकि जब आप इस पर काम करें तो मेनू को छिपाने वाली संपत्ति लागू न हो।


ओह, मैं विशेष रूप से इस तरह के एक संशोधन बनाने के बिना कहा था कि चप पर आते हैं।
OJFord

आपने कहा था कि यह "एक बार सक्रिय होने के बाद पॉप अप नहीं रहता है" मैं सुझाव दे रहा हूं कि सभी सक्रियण ट्रिगर को हटा दें ताकि यह हमेशा दिखाई दे। यही कारण है कि मैं सभी पॉपअप मेनू करता हूं अन्यथा यह दर्द की दुनिया है। लेकिन अपने आप को बाहर दस्तक दें :)
वुडी

0

मुझे ऐसा करने की आवश्यकता थी, लेकिन जिस तत्व का मैं निरीक्षण करने की कोशिश कर रहा था, उसे जोड़ा गया और गतिशील रूप से दूसरे तत्व के होवर राज्य के आधार पर हटा दिया गया। मेरा समाधान इस एक के समान है , लेकिन यह मेरे लिए काफी काम नहीं आया।

तो यहाँ मैंने क्या किया:

  1. mouseoverउस तत्व पर डिबगर मोड में प्रवेश करने के लिए सरल स्क्रिप्ट जोड़ें जो उस हॉवर ईवेंट को ट्रिगर करता है जिसके बारे में आप चिंतित हैं।
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});
  1. फिर, क्रोम में देव कंसोल के साथ, अपने तत्व पर होवर करें, और आप डीबगर मोड में प्रवेश करेंगे। देव उपकरण के स्रोत अनुभाग पर नेविगेट करें, और "फिर से शुरू स्क्रिप्ट निष्पादन" बटन (नीचे नीला प्ले-लाइक बटन) पर क्लिक करें।

यहां छवि विवरण दर्ज करें

एक बार जब आप ऐसा कर लेते हैं, तो आपके DOM को होवर स्थिति में रोक दिया जाएगा, और आप तत्व निरीक्षक का उपयोग उस राज्य में मौजूद सभी तत्वों का निरीक्षण करने के लिए कर सकते हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.