देखें: Chrome डेवलपर टूल में होवर स्थिति

855

मैं :hoverएक एंकर के लिए शैली देखना चाहता हूं जिसे मैं क्रोम में देख रहा हूं । में Firebug , वहाँ एक शैली लटकती है कि मुझे एक तत्व के लिए अलग-अलग राज्यों चुनने की अनुमति देता है।

मुझे क्रोम में कुछ भी समान नहीं मिल रहा है। क्या मैं कुछ भूल रहा हूँ?

— बेन
स्रोत

अच्छा सवाल 'क्योंकि मैं देख रहा था कि फायरबग में हॉवर शैली को कैसे संपादित किया जाए - यहाँ देखें stackoverflow.com/questions/5389245/…

— क्रिस हैल्क्रो

1

मुझे पता है कि यह समस्या का पूर्ण / सही समाधान नहीं है, लेकिन उन उत्तरों में समाधान नहीं मिल सका जो माउसओवर इवेंट के लिए काम करेंगे। Safari का उपयोग करने से आप ब्राउज़र टूल का उपयोग करते हुए हॉवर कर सकते हैं। इसलिए, इस समस्या के लिए, किसी अन्य ब्राउज़र का उपयोग करने पर विचार करें।

— the12

1255

अब आप दोनों छद्म श्रेणी के नियमों को देख सकते हैं और उन्हें तत्वों पर मजबूर कर सकते हैं।

:hoverस्टाइल्स फलक जैसे नियमों को देखने के :hovलिए शीर्ष दाईं ओर छोटे पाठ पर क्लिक करें ।

किसी तत्व को :hoverराज्य में बाध्य करने के लिए , उसे राइट क्लिक करें और चुनें :hover।

Chrome डेवलपर टूल शॉर्टकट में तत्वों के पैनल पर अतिरिक्त सुझाव ।

— ट्रैविस नॉर्थकट
स्रोत

3

यकीन नहीं है कि यह कब बदल गया है, लेकिन आप अब अन्य तत्वों पर तत्वों (केवल <a>तत्वों को नहीं) पर राइट क्लिक -> बल तत्व स्थिति (तत्वों फलक से) पर क्लिक कर सकते हैं।

— ट्रैविस नॉर्थकट

3

यह CSS के लिए काम करता है: होवर परिवर्तन करता है, लेकिन यदि आप JS का उपयोग करके बदलाव नहीं करते हैं।

— मैथ्यू_360

यहाँ एक त्वरित वीडियो मैं एक साथ फेंक दिया प्रदर्शन है: क्रोम 59 में मंडराना राज्य करता है, तो यह किसी को भी मदद करता है youtu.be/Bklz3lGTFi8

— RoccoB

54

EDIT: यह जवाब बग फिक्स से पहले था, tnothcutt का जवाब देखें।

यह थोड़ा मुश्किल था, लेकिन यहाँ जाता है:

तत्व को राइट-क्लिक करें, लेकिन अपने माउस पॉइंटर को तत्व से दूर न रखें, इसे होवर अवस्था में रखें।
हिट अप एरो के रूप में कीबोर्ड के माध्यम से निरीक्षण तत्व चुनें, और फिर कुंजी दर्ज करें।
मिलान सीएसएस नियमों के तहत डेवलपर टूल देखें, आपको देखने में सक्षम होना चाहिए: होवर।

पुनश्च: मैंने आपके एक प्रश्न टैग पर यह कोशिश की।

— Babiker
स्रोत

32

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

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

बूटस्ट्रैप टूलटिप्स के लिए हॉवर या माउसेंटर मजबूर करना

— k0pernikus
स्रोत

यह सबसे अच्छा जवाब है

— अरगुन

20

Chrome Developer Tools में HOVER STATE शैलियों को देखने के कई तरीके हैं ।

विधि 01

विधि 02

फ़ायरफ़ॉक्स डिफ़ॉल्ट डेवलपर टोल के साथ

फायरबग के साथ

— संतोष खलसे
स्रोत

9

यदि यह मदद करता है, तो यह नवीनतम क्रोम (47.0.2526.106) में आसान प्रतीत होता है:

तत्व का निरीक्षण करें और फिर बाईं नाली में तीन सफेद बिंदुओं पर क्लिक करें:

फिर इस ड्रॉपडाउन से वांछित तत्व राज्य चुनें:

— Ianp
स्रोत

4

मुझे नहीं लगता कि ऐसा करने का कोई तरीका है। मैंने एक सुविधा अनुरोध सबमिट किया । अगर कोई रास्ता है, तो Google के डेवलपर्स इसे तुरंत इंगित करेंगे और मैं अपना उत्तर संपादित करूंगा। यदि नहीं, तो हमें इंतजार करना होगा और देखना होगा। (आप इस मुद्दे को वोट करने के लिए घूर सकते हैं)

Chrome प्रोजेक्ट सदस्य द्वारा टिप्पणी 1 : 10.0.620.0 में, स्टाइल्स पैनल चयनित तत्व के लिए रोवर शैलियों को दिखाता है: लेकिन सक्रिय नहीं है।

(इस पोस्ट के अनुसार) वर्तमान स्थिर चैनल संस्करण 8.0.552.224 है।

आप Google Chrome की अपनी स्थिर चैनल स्थापना को बीटा चैनल या देव चैनल ( आरंभिक एक्सेस रिलीज़ चैनल देखें ) से बदल सकते हैं।

आप क्रोम की एक माध्यमिक स्थापना भी स्थापित कर सकते हैं जो कि देव चैनल की तुलना में अधिक अद्यतित है ।

... कैनरी बिल्ड को देव चैनल की तुलना में अधिक बार अपडेट किया जाता है और रिलीज़ होने से पहले इसका परीक्षण नहीं किया जाता है। क्योंकि कैनरी बिल्ड कई बार अनुपयोगी हो सकता है, इसे आपके डिफ़ॉल्ट ब्राउज़र के रूप में सेट नहीं किया जा सकता है और इसे Google Chrome के किसी भी उपरोक्त चैनल के अलावा इंस्टॉल किया जा सकता है। ...

— ब्रायन फील्ड
स्रोत

महान जांच। मैं नवीनतम देव बिल्ड (10.0.612.3) को हिला रहा हूं, इसलिए मैं बस थोड़ा इंतजार करूंगा और उम्मीद है कि मैं देखूंगा: अच्छाई!

— बेन

4

मुझे पता है कि मैं जो करता हूं वह काफी प्रभावी है, हालांकि यह पूरी तरह से काम करता है और यही तरीका है कि मैं इसे हर बार करता हूं।

फिर, इस तरह आगे बढ़ें:

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

अंत में, तत्व को होवर करें, राइट क्लिक करें और तत्व का निरीक्षण करें, अपने माउस को देव टूल्स विंडो में स्थानांतरित करें और आप अपने तत्व के साथ खेल सकेंगे: होवर सीएसएस।

चीयर्स!

— rmartrenado
स्रोत

1

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

— cfranklin

3

मैं hoverChrome के साथ एक मेनू स्थिति डिबग कर रहा था और होवर स्टेट कोड देखने में सक्षम होने के लिए ऐसा किया था:

में Elementsपैनल पर क्लिक करें Toggle Element stateबटन पर क्लिक करें :hover।

में Scriptsपैनल पर जाएँ Event Listeners Breakpointsसही नीचे अनुभाग में और चुनें Mouse -> mouseup।

अब मेनू का निरीक्षण करें और उस बॉक्स को चुनें जिसे आप चाहते हैं। जब आप माउस बटन छोड़ते हैं तो यह रुक जाना चाहिए और आपको Elementsपैनल में चयनित तत्व होवर स्थिति ( Stylesअनुभाग देखें) को दिखाना चाहिए ।

— लेनियल मैकाफेर्री
स्रोत

2

Chrome में होवर की स्थिति बदलना बहुत आसान है, बस नीचे दिए गए इन चरणों का पालन करें:

1) अपने पेज में राइट क्लिक करें और निरीक्षण का चयन करें

2) उस तत्व का चयन करें जिसे आप DOM में निरीक्षण करना चाहते हैं

3) पिन आइकन चुनें (तत्व स्थिति टॉगल करें)

4) फिर होवर पर टिक करें

अब आप ब्राउज़र में चयनित DOM के होवर स्टेट देख सकते हैं !

— एलिरेज़ा
स्रोत

1

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

बदलती शैली के लिए उपरोक्त चरणों का पालन करें और फिर - कीबोर्ड पर ctrl + TAB दबाकर अपना ब्राउज़र टैब बदलें। फिर उस टैब पर वापस क्लिक करें जिसे आप डीबग करना चाहते हैं। आपकी हॉवर स्क्रीन अभी भी रहेगी। अब ध्यान से अपने माउस को डेवलपर टूल क्षेत्र में ले जाएं।

— राम
स्रोत

1

आपको अपने माउस को हॉवर अवस्था में रखने की आवश्यकता नहीं है

— Zachary Kniebel

1

मेरे मामले में, मैं बूटस्ट्रैप टूलटिप को डब करना चाहता हूं। लेकिन ऊपर दिए गए तरीके मेरे काम नहीं आते। मुझे लगता है कि बूटस्ट्रैप ने इसे माउस / आउट इवेंट की तरह लागू किया है।

वैसे भी, जब मैं एक बटन पर मंडराता हूं, तो यह बटन के नीचे एक भाई html तत्व उत्पन्न करेगा, इसलिए मैं "डेवलपर टूल" विंडो के "एलीमेंट्स" टैब में बटन के मूल तत्व का चयन करता हूं, बटन को हॉवर करता हूं, और "Ctrl + C", फिर मैं उस सोर्स कोड को पेस्ट कर सकता हूं जिसमें जनरेट कोड होता है। अंतिम बार जनरेट किया गया कोड ढूंढें, और इसे "एलिमेंट्स" के रूप में "एलिमेंट्स" टैब में सोर्स कोड में जोड़ें।

आशा है कि यह किसी की मदद कर सकता है।

— सीन गीत
स्रोत

0

मुझे लगता है कि यह अब क्रोम में एक मुद्दा नहीं है, लेकिन सिर्फ मामले में है। TAB कुंजी के साथ घूमने पर मैंने DOM का निरीक्षण करने के लिए यह jQuery स्क्रिप्ट लिखी ।

यदि 'माउसओवर' का उपयोग करने के लिए बदला गया है, तो इस तरह दिखेगा:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

जब भी आप क्लिक करते हैं या जिस तत्व को आप रोकना चाहते हैं, उस पर आप आसानी से इवेंट हैंडलर को हटा सकते हैं।

— davidmontoyago
स्रोत