একটি হোভার উপাদান "পরিদর্শন করুন"?


107

দ্রষ্টব্য: আমি অনুরূপ থ্রেড পড়েছি, তবে আমার সমস্যাটি পুরোপুরি কিছুই নয় - আমি এটিতে সূক্ষ্মভাবে ক্লিক করতে পারি, এটি তখনই অদৃশ্য হয়ে যায়।

আমি ক্রোমে "পরিদর্শন উপাদানকে" একটি অমূল্য সরঞ্জাম পেয়েছি, তবে আমার বেশিরভাগ উদ্দীপনাটি যেহেতু আপনারা ইতিমধ্যে বেশিরভাগের কাছে জাদুকর উপায়ে শিখেছেন আমাকে আমার এনএভি বারে একটি উপাদানটির জন্য একটি সাব-মেনু তৈরি করতে দেখেছিল, যা নীচে উঠে আসে মূল আইটেম

পপআপ (বা নীচে) আমি কীভাবে পছন্দ করি তা বেশ স্টাইলযুক্ত নয়, তাই আমি কোথা থেকে আসছি তা দেখার জন্য ডান ক্লিক করুন> উপাদানটি পর্যালোচনা করুন এবং কীভাবে আমার কাঙ্ক্ষিত প্রভাব অর্জন করবেন সে সম্পর্কে আরও ভাল ধারণা পাবেন।

যাইহোক, আমি আমার মাউসটিকে মেনু থেকে সরিয়ে নিয়ে যাওয়ার সাথে সাথে এটি চলে গেছে।

সুতরাং আমি পরিদর্শন ফলকে বিভিন্ন উপাদান নির্বাচন করতে পারি না এবং একই সাথে কোন অঞ্চলটি হাইলাইট করা হয়েছে তা দেখুন।

মেনু পরিবর্তন না করেই কি এটিকে ঘিরে কোনও উপায় আছে যাতে এটি একবারে সক্রিয় হয়ে গেলে "পপ আপ" থাকে?


4
এর মতো পরিস্থিতিতে সাধারণত পৃষ্ঠায় অস্থায়ী পরিবর্তন করতে আমি কনসোল ব্যবহার করি, যেমন mouseleaveপ্যারেন্ট মেনু থেকে ইভেন্টটি সরিয়ে ফেলা । সাব-মেনুটি তখন আপনার মাউসটিকে পিতামাতার মেনু থেকে সরানোর পরেও খোলা থাকা উচিত।
jbabey

ক্রোম এখন এটি সমর্থন করে। UI উপাদানটি নির্বাচন করুন (উদাহরণস্বরূপ ট্যাগ)> পরিদর্শন উপাদান> স্টাইলস ট্যাব, ফিল্টার বাক্সের পাশে একটি ": hov" বিভাগ রয়েছে। এটি ক্লিক করুন. এখন আপনি হোভার চেকবক্স নির্বাচন করতে পারেন এবং হোভারে কী স্টাইলগুলি লোড হয় তা দেখতে পারেন।
ধনুকা 777

উত্তর:


155

যদি হোভারটি জেএস দ্বারা ট্রিগার করা হয় তবে কেবল কীবোর্ডের মাধ্যমে স্ক্রিপ্ট সম্পাদনাকে বিরতি দিন। এই হল অনেক করে DOM জমাকৃত ব্যতীত অন্য উত্তর সুপারিশ এর সহজ উপায়।

আপনি Chrome এ এটি কীভাবে করেন তা এখানে। আমি নিশ্চিত ফায়ারফক্সের একটি সমতুল্য পদ্ধতি রয়েছে:

  1. বিকাশকারী সরঞ্জামগুলি খুলুন এবং উত্সগুলিতে যান।
  2. স্ক্রিপ্ট execution- বিরাম শর্টকাট দ্রষ্টব্য F8

    স্ক্রিপ্ট কার্যকর করা বন্ধ করুন

  3. উপাদানটি উপস্থিত হওয়ার জন্য ইউআইয়ের সাথে যোগাযোগ করুন।

  4. হিট F8
  5. এখন আপনি আপনার মাউসকে চারপাশে সরিয়ে নিতে পারেন, ডমকে যা যা কিছু পরীক্ষা করুন। উপাদানটি সেখানেই থাকবে।

4
এখানে প্রদত্ত অন্যান্য পদ্ধতিগুলি যেখানে প্রচুর প্রেক্ষাপটে কাজ করে না।
এড স্টাব

4
অসাধারণ. আমি মনে করি এটি সেরা উপায়।
বরুণ মেহতা

4
সাফারির জন্য এটি Debuggerট্যাব
ব্যবহারকারী 2661518

6
এটি আমার পক্ষে কাজ করে নি। এর পরে F8, স্ক্রিনটি হিমশীতল হয় এবং কোনও উপাদান নির্বাচন করতে পারে না। আমার কার্যতালিকা টিপতে হবে F8, Elementsট্যাবে স্যুইচ করুন , তারপরে হোভার উপাদানটিতে থাকা শব্দগুলির জন্য অনুসন্ধান করুন।
ক্রুদ্ধহ্যাকার

4
এটি ফায়ারফক্সে একই কাজ করে তবে F8 চাপার আগে আপনার ডিবাগার ট্যাবে ফোকাস থাকা দরকার (সেই শর্টকাটটি সেখান থেকে কাজ করে)। একবার বিরতি দেওয়া গেলে, আপনি ডওমকে সমস্ত উপাদানগুলির সাথে পর্যবেক্ষণ করতে পারেন যা কেবলমাত্র একটি: হোভার স্টেট উপস্থিত থাকার সময় উপস্থিত রয়েছে। উপাদানগুলি পরিদর্শন করার জন্য ঘোরাফেরা করার সময় F8 টিপতে এটি কেবল একটি প্রশ্ন। আপনার যদি অন্য একটি উপাদান বাছাই করতে হয়, তবে পরিদর্শন করার জন্য প্রাসঙ্গিক মেনু এড়ানোর চেষ্টা করুন (বিরতি দিয়ে ট্রিগার করতে পারেন)। এটি ক্যাপচারের জন্য ডিভটোলের উপরের বাম আইকনটি ব্যবহার করুন।
কির কানোজ

73

যদি এর পরে ইফেক্টটি hoverদেওয়া হয় CSSতবে হ্যাঁ, আমি সাধারণত এটি পেতে দুটি বিকল্প ব্যবহার করি:

এক, এর মাউস ছেড়ে : ওপেন ডক উইন্ডোতে পরিদর্শক এবং আপনার নাগালের পর্যন্ত প্রস্থ বৃদ্ধি , তারপর ডান ক্লিক করুন এবং পপ-আপ মেনু পরিদর্শক জোন বেশি হতে হবে ... তারপর আপনি পরিদর্শক দৃশ্য উপর মাউস সরানো , নথিতে সক্রিয় রাখা।seehover effecthover area
HTML elementhover effect

এখানে চিত্র বর্ণনা লিখুন

দুই, এর মাউস শেষ হয়নি এমনকি যদি , পরিদর্শক খুলতে, এখানে যান এবং উপরের ডান আইকন বলে ক্লিক (একটি তীর সহ ডটেড আয়তক্ষেত্র) ... আছে আপনি নিজে সক্রিয় করতে পারেন (অন্যদের মধ্যে) সঙ্গে চেকবক্স সরবরাহ করা হয়েছে।keephover effectHTML elementStyles TABToggle Element StateHover Event

এখানে চিত্র বর্ণনা লিখুন

যদি এটি কিছুটা পরিষ্কার না হয় তবে আমাকে জানান এবং আমি কয়েকটি স্ক্রিনশট যুক্ত করতে পারি। সম্পাদিত : স্ক্রিনশট যুক্ত হয়েছে।

এবং পরিশেষে এবং আমি যেমন শুরুতে বলেছি, এটি কেবলমাত্র তখনই hoverসেট করতে সক্ষম হবে CSS:HOVER... যখন আপনি উদাহরণটি hover stateদিয়ে নিয়ন্ত্রণ করেন jQuery.onMouseOver, শুধুমাত্র কাজ করে (কখনও কখনও), পদ্ধতিটি এক।

আশা করি এটা সাহায্য করবে.


4
আপনার প্রথম সমাধানটি একটি ভাল কাজ, এবং আমার এটি আরও ভাল করার একটি উপায় আছে: রক্ষিত উপাদানটিকে ডানদিকে ক্লিক করুন, মাউসটিকে পুরোপুরি "ইন্সপেক্টর জোন" এ সরান , এবং তারপরে কীবোর্ড কীগুলি নিয়ে নেভিগেট করুন এবং "পরিদর্শন উপাদানটি পরীক্ষা করুন" এ চাপুন "। উপাদানটি আড়াল করে রাখা হবে। আপনার দ্বিতীয় সমাধানের জন্য, হ্যাঁ, যে (বা প্রসঙ্গ মেনু ব্যবহার করে :hover) অবশ্যই সঠিক সমাধান হওয়া উচিত ছিল, তবে খুব দুর্ভাগ্যক্রমে এটি যতক্ষণ আমি মনে করতে পারি ক্রোম / ফায়ারফক্সে কাজ করে নি ...
গিলাড বার্নার

আমি উইন্ডোজে এটি করার অভ্যস্ত ছিলাম, তবে ম্যাকের ক্ষেত্রে এই কৌশলটি কাজ করে না, কোনও ম্যাকের মাধ্যমে কি এর উপায় খুঁজে পেয়েছে? দেখে মনে হচ্ছে উইন্ডোতে মাউস সরানোর ঘটনাগুলি "যোগাযোগ করে" এমনকি মাউস ইন্সপেক্টর বা সাব-মেনুতে
থাকলেও

@ গিলাদ বারনার আপনার প্রস্তাবিত শর্টকাটের জন্য আপনাকে ধন্যবাদ, এটি আমার পক্ষে কাজ করেছে। আমার পিসিতে এটি কেবল সমস্যা কিনা তা আমি জানি না, তবে আমি কীবোর্ডের মাধ্যমে নির্বাচিত মেনু বিকল্পটি দেখতে পাচ্ছি না এবং ড্রপডাউন মেনুটি দৃশ্যমান অবস্থায় শর্টকাট কী (ctrl-shift-I) কাজ করে না সুতরাং, যেহেতু পরিদর্শন উপাদানটি ড্রপডাউনটিতে সর্বশেষ বিকল্প, তাই আমি শেষ আইটেমটির চারপাশে মোড়ক এবং এন্টার টিপতে আপ-তীর কীটি ব্যবহার করেছি এবং এটি কার্যকর হয়েছে।
বিল হিলেম্যান

মুহূর্তের মতো :hoverবিকল্পটি টগল ক্লাস বিকল্পে রয়েছে বলে মনে হচ্ছে
সাগনিক প্রধান

33

আমার জন্য কী কাজ করেছে তা সুনির্দিষ্ট একটি ট্যাগ নির্বাচন করা যা আমি পরিদর্শন করতে এবং এটি করতে চেয়েছিলাম:

এখানে চিত্র বর্ণনা লিখুন

উপরের কাজটি করার পরে, আমি আবার স্বাভাবিকভাবেই নির্বাচন করব যে কোনও ট্যাগ পরে ড্রপডাউনটি স্বয়ংক্রিয়ভাবে যেমন থাকবে তেমনি আমি অন্যান্য জায়গায় যেমন পরিদর্শন উপাদান ইত্যাদিতে মাউসওভার করি when

স্বাভাবিক অবস্থায় ফিরে যেতে মেনু ড্রপডাউন উপাদানগুলি পরিদর্শন করার সময় আপনি ব্রাউজারটি সতেজ করতে পারেন।

আশাকরি এটা সাহায্য করবে. :)


5
প্রতিভা :)। এটি জাভাস্ক্রিপ্ট দ্বারা প্রকাশিত ঘোরাগুলি পরিদর্শন করতে দেয়।
এলউডপি

4
সুন্দর এটি আমার কাছে আসল উত্তরের চেয়ে ভাল কাজ করেছে।
ভিক্টর

14

আপনি এটি জাভাস্ক্রিপ্ট কনসোলেও করতে পারেন:

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

এমন একটি যা "হোভার" অবস্থায় থাকা উপাদানকে "হিমায়িত" করবে।


7

কোনও সিএসএস পরিবর্তন বা জেএস ক্রোমে বিরাম না দিয়ে আমি এটি কীভাবে করব (আমি উইকেটে চালিয়ে যাচ্ছি তবে আমি একটি ম্যাকে আছি এবং আমার সামনে পিসি নেই):

  1. আপনার বিকাশকারী কনসোল খোলা আছে।
  2. এখনও হোভার পরিদর্শন সরঞ্জামটি সক্ষম করবেন না, তবে এর পরিবর্তে আপনার মাউসটিকে তার উপরে সরিয়ে আপনার পছন্দসই সাব মেনুটি খুলুন।
  3. Command+ Shift+ C(ম্যাক) বা Ctrl+ Shift+ C(উইন / লিনাক্স) হিট করুন

এখন হোভার পরিদর্শন সরঞ্জামটি আপনার সাব-এনএভি-তে খোলা উপাদানগুলির জন্য প্রযোজ্য।


4

এটি পূর্ববর্তী ব্রাউজার সংশোধনীতে উপস্থিত ছিল কিনা তা নিশ্চিত নই, তবে আমি এই অত্যন্ত সহজ পদ্ধতিটি সন্ধান করেছি।

ক্রোম বা ফায়ারফক্সে পরিদর্শকটি খুলুন, আপনি যে উপাদানটিতে আগ্রহী সেটিতে ডান ক্লিক করুন এবং উপযুক্ত বিকল্পটি নির্বাচন করুন (এই ক্ষেত্রে: হোভার)। এটি সম্পর্কিত সিএসএসকে ট্রিগার করবে।

ক্রোমিয়ামে মেনু খুলছে ফায়ারফক্সে একই মেনু খুলছে

ফায়ারফক্স 55 এবং ক্রোমিয়াম 61 এর স্ক্রিনশট।


4
দুর্ভাগ্যক্রমে এটি জটিল স্টাফগুলির জন্য কাজ করবে না: আটকে থাকা উপাদানগুলি। এটি কেবল সিএসএস সিউডো-শ্রেণির রাষ্ট্রকে ট্রিগার করে। কার্যকরভাবে জড়িত সিএসএস সক্ষম করা। তবে এটি জাভাস্ক্রিপ্ট ইভেন্টটি ট্রিগার করে না। আসল প্রশ্নটি এই জাতীয় দৃশ্যে ডিবাগ করতে সক্ষম হচ্ছিল। Chrome এবং ফায়ারফক্সে কীভাবে এটি করা যায় তার সম্পর্কে আরও টিপসের জন্য, আমার মন্তব্যটি সর্বাধিক উত্সাহিত উত্তরে (স্বীকৃত কোনও নয়), দেখুন।
কির কানোজ

2

দুর্দান্ত জিনিস!

এই পরামর্শের জন্য জিএমওকে ধন্যবাদ। আমি সেই বৈশিষ্ট্যগুলির সেটিংসটি ব্যাপকভাবে সহায়ক সম্পর্কে জানি না।

শব্দটির একটি ছোট্ট সংশোধন হিসাবে আমি সেই প্রক্রিয়াটি নীচে ব্যাখ্যা করব:

  • আপনি যে উপাদানটি স্টাইল করতে চান তার উপর রাইট ক্লিক করুন

    • 'পরিদর্শন' সরঞ্জামটি খুলুন

    • ডানদিকে, ছোট স্টাইলস ট্যাবে নেভিগেট করুন

    • সিএসএস স্টাইলশিট সামগ্রীগুলির উপরে পাওয়া গেছে

    • .Hov বিকল্পটি নির্বাচন করুন - এটি আপনাকে নির্বাচিত এইচটিএমএল উপাদানগুলির জন্য উপলব্ধ সমস্ত সেটিংস সরবরাহ করবে

    • নিষ্ক্রিয় হওয়ার জন্য সমস্ত বিকল্প ক্লিক করুন এবং পরিবর্তন করুন

    • এখন আপনি যে অবস্থাটি টুইট করতে চান তা নির্বাচন করুন - এর যে কোনওটির সক্রিয়করণের পরে, আপনার স্টাইলশীট আপনাকে সরাসরি সেটিংগুলিতে ঝাঁপিয়ে দেবে:

শৈলী - টুইটার ফিল্টার - ইন্টারেক্টিভ উপাদান

এই তথ্যটি আমার জন্য জীবন রক্ষাকারী ছিল, বিশ্বাস করতে পারি না আমি এটি সম্পর্কে শুনেছি!


এটি ছিল ক্রোমের জন্য সেরা উপায়!
ঝুঁকিপূর্ণ

4
দুর্দান্ত, আমার প্রতিক্রিয়া কি আপনার পক্ষে সহায়ক ছিল?
ড্যান হ্যাডক

1

আমার এটি করা দরকার ছিল, তবে আমি যে উপাদানটি পরিদর্শন করার চেষ্টা করছিলাম সেটিকে অন্য উপাদানটির হোভারের অবস্থার ভিত্তিতে গতিশীলভাবে যুক্ত করা হয়েছিল এবং সরানো হয়েছিল। আমার সমাধান অনুরূপ এই এক , কিন্তু যে বেশ আমার জন্য কাজ করে নি।

সুতরাং আমি এখানে যা করেছি তা এখানে:

  1. mouseoverআপনার সম্পর্কে উদ্বিগ্ন হোভার ইভেন্টটিকে ট্রিগার করে এমন উপাদানটির উপর ডিবাগার মোড প্রবেশ করার জন্য সরল স্ক্রিপ্ট যুক্ত করুন ।
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});
  1. তারপরে, ক্রোমে খোলা ডেভ কনসোলটি দিয়ে আপনার উপাদানটি নিয়ে ঘুরে দেখুন এবং আপনি ডিবাগার মোডে প্রবেশ করবেন। ডেভ সরঞ্জামগুলির উত্স বিভাগে নেভিগেট করুন এবং "স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন" বোতামটি (নীচে নীলের প্লে-এর মতো বোতাম) ক্লিক করুন।

এখানে চিত্র বর্ণনা লিখুন

একবার আপনি এটি করার পরে, আপনার ডোমটি হোভারের স্থিতিতে বিরতি দেওয়া হবে, এবং আপনি উপাদান পরিদর্শককে সমস্ত উপাদানগুলির যে অবস্থায় রয়েছে সেগুলি পর্যবেক্ষণ করতে ব্যবহার করতে পারেন।


0

সিএসএস পরিবর্তন করুন যাতে মেনুটি লুকিয়ে রাখে এমন সম্পত্তি প্রয়োগ করা হয় না যখন আপনি কাজ করার সময় এটিই আমি করি।


ওহ চ্যাপে আসুন আমি বিশেষত এ জাতীয় কোনও পরিবর্তন না করেই বলেছিলাম।
ওজেফোর্ড

আপনি বলেছিলেন যে এটি "একবার সক্রিয় হওয়ার পরে পপ আপ থাকবেন না" আমি পরামর্শ দিচ্ছি যে সমস্ত অ্যাক্টিভেশন ট্রিগারগুলি সরান যাতে এটি সর্বদা দৃশ্যমান থাকে। আমি সমস্ত পপআপ মেনুগুলি সেভাবেই করি অন্যথায় এটি ব্যথার জগত। তবে নিজেকে ছিটকে দিন :)
উডি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.