অন্যান্য উপাদান যখন মাউস overedাকা / প্রবেশ করানো হয় কেবল তখনই উপস্থিত উপাদানটি পরীক্ষা করুন

119

প্রায়শই আমি একটি উপাদান (যেমন সরঞ্জামদ্বার) পরিদর্শন করতে চাই যা কেবল তখনই উপস্থিত হয় যখন অন্য উপাদানটি মাউস আটকানো / প্রবেশ করা হয়। যে উপাদানটি উপস্থিত হয়, তা jQuery এর মাউসেন্টার ইভেন্টের মাধ্যমে দৃশ্যমান করা হয়।

আমি টুলটিপটি পরিদর্শন করতে পারি না, যেহেতু আমার মাউসটি উপাদানটি ছেড়ে দিলে সরঞ্জামদণ্ডটি অদৃশ্য হয়ে যায়।

জেএস ইভেন্টগুলিকে বিরতি দেওয়ার কোনও উপায় আছে যাতে আমি উপাদানটিতে ঘুরে বেড়াতে পারি, তারপরে ব্রাউজারের জেএসকে বিরতি দিতে পারি এবং এটি সফলভাবে পরীক্ষা করতে পারি?

উদাহরণস্বরূপ, টুইটার বুটস্ট্র্যাপের সরঞ্জামদণ্ডগুলি পরীক্ষা করার চেষ্টা করুন: http://getbootstrap.com/javascript/#tooltips ।

javascript google-chrome-devtools

— ডন পি
সূত্র

9

ঠিক এফওয়াইআই, যদি উপাদানটি জেএসের পরিবর্তে সিএসএসের কারণে উপস্থিত :hoverহয় তবে আপনি ডিভাইসগুলির এলিমেন্টস (ডিওএম) ভিউতে উপাদানটিতে ডান ক্লিক করে "ফোর্স এলিমেন্ট স্টেট" এবং তারপরে ": হোভার" নির্বাচন করে জোর করতে পারেন ।

— এমএমএম

226

এটি Chrome 38.0.2094.0 এ মোটামুটি সহজ।

এটি দেখতে কেমন দেখাচ্ছে তা এখানে:

ধাপে ধাপে:

সোর্স প্যানেলে ডেভটুলগুলি খুলুন
বোতামের উপর দিয়ে ঘুরিয়ে দিয়ে টুলটিপটি প্রদর্শিত হবে
পৃষ্ঠাটি হিমায়িত করতে F8 চাপুন
এলিমেন্টস প্যানেলে স্যুইচ করুন এবং টুলটিপটি নির্বাচন করতে উপরের বাম দিকে চৌম্বকীয় কাচের আইকনটি ব্যবহার করুন

সিএসএসের কারণে যদি টুলটিপটি প্রদর্শিত হয় তবে আপনি সেই ক্ষেত্রে যা করতে পারেন তা এখানে:

ধাপে ধাপে:

দেবটুলগুলি খুলুন
দেব সরঞ্জামগুলিতে ট্রিগার উপাদানটি নির্বাচন করুন (লিঙ্ক)
ডান ক্লিক করুন, এবং "জোর উপাদান উপাদান" নির্বাচন করুন, এবং ": হোভার" নির্বাচন করুন
সিএসএস টুলটিপটি পরীক্ষা করুন

— কিছু লোক
সূত্র

1

@ ইউরিগ্যালান্টার এটি শীর্ষে বাম দিকে স্পাইগ্লাস আইকনের মাধ্যমে উপলব্ধ। কেবল আইকনে ক্লিক করুন, তারপরে

— টুলটিপটিতে

3

হ্যাঁ, আমি কী করছি তা আরও সহজ করার জন্য আমি একটি জিআইএফ যুক্ত করেছি।

— কিছু লোক

2

@DonnyP আমি ব্যবহৃত byzanz-record। এটি একটি প্যাকেজ যা আপনি পেতে পারেন sudo apt-get install byzanz।

— কিছু লোক 20

5

এর রয়েছে LICEcap , এটা পর্দার একটা অংশ রেকর্ড একটি সুপার-অপ্টিমাইজ জিআইএফ সরাসরি। উইন্ডোজ, ওএস এক্স এবং লিনাক্স।

— ফ্রেগান্ট

2

@ bfred.it লিনস্ক্যাপ লিনাক্সের জন্য উপলভ্য নয় । বিষয়টিতে এই গিথুব ইস্যুটি দেখুন । মনে হচ্ছে লোকেরা এটি WINE দিয়ে চালিয়ে সাফল্য পাচ্ছে ।

— আইজাক গ্রেগসন

15

উভয় সাফারি এবং Chrome এর ওয়েব ইন্সপেক্টর অফার চেকবাক্সগুলি যেখানে আপনি টগল করতে পারেন :active, :focus, :hoverএবং :visitedএকটি উপাদান রাজ্যের। এগুলি ব্যবহার করা আরও সহজ হতে পারে।

সাফারি:

সাফারি চেকবাক্স

ক্রোম:

ক্রোমে চেকবক্স

— zıəs uɐɟəʇs
সূত্র

5

টুলটিপটি :hoverশৈলীর দ্বারা ট্রিগার করা যায় না ।

— Vidime বিদাস

2

ফায়ারফক্সে ফায়ারবগের একই জিনিস রয়েছে (বিয়োগ :visited, যা স্নুপিং প্রতিরোধে সীমাবদ্ধ) - এইচটিএমএল ট্যাবে এটি ডানদিকে "স্টাইল" ড্রপডাউন

— ইজকাটা

1

@Izkata জন্য ফায়ারফক্সের নেটিভ ডেভেলপার টুলস, পাউরুটির গুড়োয়, বা HTML / DOM গাছ উপাদান ডান-ক্লিক করুন, এবং থেকে বাছাই :hover, :activeবা :focus।

— কিরান দাম

4

এটি করার আরও একটি জটিল উপায় রয়েছে:

উপাদানটির উপরে যান যা আপনার টুলটিপটি প্রদর্শিত হয়।
প্রাসঙ্গিক মেনু খুলতে ডান ক্লিক করুন।
আপনার মাউসটিকে আপনার ডেভ সরঞ্জাম উইন্ডোতে সরান এবং দেব সরঞ্জাম প্যানেলে যে কোনও জায়গায় বাম ক্লিক করুন।

আপনার টুলটিপটি দৃশ্যমান থাকবে, তারপরে আপনি এটি উপাদান ট্যাবে পরিদর্শন করতে সক্ষম হবেন।

ক্রোমে পরীক্ষিত। ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না।

— নিকোলাস ফোর্নি
সূত্র

1

অতীতে আমি এটিই করেছি, তবে @ সুমজুয়ের উত্তরটি সবচেয়ে ভাল এবং সহজ উপায়।

— জন ওয়াশাম

@ জনডুব্যা না এটি আসলে নয়। এটি সরকারী উপায় হতে পারে তবে এটি অবশ্যই সহজ নয়। জড়িত রয়েছে অনেকগুলি পদক্ষেপ।

— মিনিরাগনারোক

আমি সাধারণত এটিই করি, তবে এটি সর্বদা কার্যকর হয় না।

— Synetech

3

যদিও @ SomeGuy এর উত্তর চমৎকার (অ্যানিমেটেড GIF জন্য T-আপ), একটি বিকল্প হিসাবে আপনি সবসময় এটি প্রোগ্রামের মাধ্যমে করতে পারেন। সবেমাত্র পপ কনসোলটি খুলুন এবং ইভেন্টের নামটি টাইপ করুন

document.getElementById('id').dispatchEvent(new Event('event-type'));

(বিশুদ্ধ জাভাস্ক্রিপ্টের নির্দিষ্ট সংশ্লেষের সাথে ব্রাউজার অনুসারে পৃথক হতে পারে)

JQuery এর সাথে আরও সহজ:

$('#id').trigger('event-type');

আপনার উদাহরণে ( http://getbootstrap.com/javascript/#tooltips ) কনসোলটি খুলুন এবং টাইপ করুন, উদাহরণস্বরূপ:

$("button:contains('Tooltip on right')").mouseenter();

এবং টুলটিপটি ডিওমে উপস্থিত হয় এবং ম্যানুয়ালি পরীক্ষা করা / সংশোধন করা যেতে পারে:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

মতামত অনুসারে, আপনি যদি পৃষ্ঠা ফ্রেমের উপরে মাউস পয়েন্টারটি সরান, আপনি যেমন অন্যান্য ইভেন্টগুলি ট্রিগার করতে পারেন mouseout। এটি প্রতিরোধ করতে আপনি টিপতে পারেন F8(প্রতিবেদনের উত্তরে) অথবা টাইপ করতে পারেন debugger;(যা এর স্ক্রিপ্টের সমতুল্য)

— blgt
সূত্র

1

উপাদানটি পরিদর্শন করা অবস্থায় আপনি এখনও অন্যান্য ইভেন্টগুলি (যেমন mouseout) ট্রিগার করতে পারেন , সুতরাং এটি সমস্যাটি প্রথম স্থানে সমাধান করে না। এটি নির্বাচন করার সময় আপনাকে বেশ যত্নবান হতে হবে। তবে এটি একটি বিকল্প পদ্ধতি।

— এমএমএম