බලන්න: ක්‍රෝම් සංවර්ධක මෙවලම්වල සැරිසරන්න


864

මම ක්‍රෝම්:hover හි සැරිසරන නැංගුරමක ශෛලිය දැකීමට මට අවශ්‍යය . දී Firebug , මට අංගයක් සඳහා විවිධ රාජ්යයන් තෝරා ගැනීමට ඉඩ සලසා දෙන ආකාරයේ දක තියෙනවා.

මට Chrome හි සමාන කිසිවක් සොයාගත නොහැක. මට යමක් මග හැරී තිබේද?


හොඳ ප්‍රශ්නයක් 'cos මම සොයමින් සිටියේ ෆයර්බග් හි හොවර්
ක්‍රිස්

1
එය ගැටලුවට සම්පූර්ණ / පරිපූර්ණ විසඳුමක් නොවන බව මම දනිමි, නමුත් මූසිකාරක සිදුවීම් සඳහා පිළිතුරු සපයන පිළිතුරුවලින් විසඳුමක් සොයාගත නොහැකි විය. බ්රවුසර මෙවලම් භාවිතා කරන අතරතුර සෆාරි භාවිතා කිරීම ඔබට සැරිසැරීමට ඉඩ සලසයි. එබැවින්, මෙම ගැටළුව සඳහා, වෙනත් බ්‍රව්සරයක් භාවිතා කිරීම ගැන සලකා බලන්න.
12

Answers:


1276

දැන් ඔබට ව්‍යාජ පංති නීති දෙකම දැකිය හැකි අතර ඒවා මූලද්‍රව්‍ය මත බල කරයි.

:hoverස්ටයිල්ස් කවුළුව වැනි නීති බැලීමට :hovඉහළ දකුණේ ඇති කුඩා පෙළ ක්ලික් කරන්න .

මූලද්‍රව්‍ය තත්වය ටොගල කරන්න

මූලද්‍රව්‍යයක් :hoverතත්වයට බල කිරීම සඳහා , එය දකුණු ක්ලික් කර තෝරන්න :hover.

මූලද්රව්ය තත්වය බල කරන්න

මත අතිරේක ඉඟි අංග මණ්ඩලයක් තුළ ක්රෝම් සංවර්ධන මෙවලම් කෙටි මාර්ග .


3
මෙය වෙනස් වූයේ කවදාදැයි විශ්වාස නැත, නමුත් ඔබට දැන් වෙනත් මූලද්‍රව්‍යයන් ( <a>මූලද්‍රව්‍ය පමණක් නොව) මත මූලද්‍රව්‍ය තත්වය (මූලද්‍රව්‍ය කවුළුව වෙතින්) බල කරන්න .
ට්‍රැවිස් නෝර්ත්කට්

4
මෙය CSS සඳහා ක්‍රියා කරයි: සැරිසැරීමේ වෙනස්කම්, නමුත් ඔබ JS භාවිතා කර නැවත වෙනස්කම් සිදු කරන්නේ නම් නොවේ.
matthew_360

මෙන්න මම ඉක්මන් වීඩියෝවක් නිරූපණය කරන්නේ: ක්‍රෝම් 59 හි
සැරිසරන්න තත්වය

53

සංස්කරණය කරන්න: මෙම පිළිතුර දෝෂ නිරාකරණයට පෙර විය, ටොනොට්කට්ගේ පිළිතුර බලන්න.

මෙය ටිකක් උපක්‍රමශීලීයි, නමුත් මෙන්න:

  • මූලද්රව්යය මත දකුණු-ක්ලික් කරන්න, නමුත් ඔබේ මූසික දර්ශකය මූලද්රව්යයෙන් ඉවතට නොයන්න, එය හොවර් තත්වයේ තබා ගන්න.
  • පහර ඊතලය මෙන් යතුරුපුවරුව හරහා පරීක්ෂා කිරීමේ අංගය තෝරන්න, පසුව යතුර ඇතුළත් කරන්න.
  • ගැලපෙන CSS රීති යටතේ සංවර්ධක මෙවලම් දෙස බලන්න, ඔබට දැකගත හැකි විය යුතුය: සැරිසරන්න.

PS: මම මෙය ඔබගේ ප්‍රශ්න ටැගයකින් අත්හදා බැලුවෙමි.


30

මගේ බූට්ස්ට්‍රැප් මෙවලම්වල හොවර් තත්වය දැකීමට මට අවශ්‍ය විය. ක්‍රෝම් ඩිව් ටූල්ස් හි: හෝවර් තත්වයට බල කිරීම අවශ්‍ය ප්‍රතිදානය නිර්මාණය නොකළ නමුත් මූසිකර් සිදුවීම කොන්සෝලය හරහා අවුලුවාලීම ක්‍රෝම් හි උපක්‍රමය සිදු කළේය. පිටුවේ jQuery තිබේ නම් ඔබට ධාවනය කළ හැකිය:

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

බූට්ස්ට්‍රැප් මෙවලම් සඳහා හොවර් හෝ මූසෙන්ටර් බල කිරීම


මෙය හොඳම පිළිතුරයි
ආර්ගුන්

21

Chrome සංවර්ධක මෙවලම්වල HOVER STATE මෝස්තර බැලීමට ක්‍රම කිහිපයක් තිබේ .

ක්රමය 01

රූප විස්තරය මෙහි ඇතුළත් කරන්න

ක්රමය 02

රූප විස්තරය මෙහි ඇතුළත් කරන්න

ෆයර්ෆොක්ස් පෙරනිමි සංවර්ධක ගාස්තුව සමඟ

රූප විස්තරය මෙහි ඇතුළත් කරන්න

ෆයර්බග් සමඟ

රූප විස්තරය මෙහි ඇතුළත් කරන්න


9

එය උදව් කරන්නේ නම්, නවතම Chrome (47.0.2526.106) හි මෙය පහසු බව පෙනේ:

මූලද්රව්යය පරීක්ෂා කර වම් බඩවැලේ ඇති සුදු තිත් තුන මත ක්ලික් කරන්න:
සුදු තිත් තුන මත ක්ලික් කරන්න

මෙම පතන සිට අපේක්ෂිත මූලද්‍රව්‍ය තත්වය තෝරන්න:
මෙම පහත වැටීම


4

මෙය කිරීමට ක්‍රමයක් ඇතැයි මම නොසිතමි. මම විශේෂාංග ඉල්ලීමක් ඉදිරිපත් කළෙමි . ක්‍රමයක් තිබේ නම්, ගූගල් හි සංවර්ධකයින් එය ඕනෑවට වඩා පෙන්වා දෙන අතර මම මගේ පිළිතුර සංස්කරණය කරමි. එසේ නොවේ නම්, අපට බලා සිටීමට සිදුවනු ඇත. (ඔබට ඡන්දය දීමට ගැටලුව විසඳා ගත හැකිය)


ක්‍රෝම් ව්‍යාපෘති සාමාජිකයාගේ අදහස් 1 : 10.0.620.0 දී, මෝස්තර පුවරුව මඟින් තෝරාගත් මූලද්‍රව්‍යය සඳහා: හොවර් මෝස්තර පෙන්වයි, නමුත් සක්‍රීය නොවේ.


(මෙම තනතුරට අනුව) වත්මන් ස්ථාවර නාලිකා අනුවාදය 8.0.552.224 වේ.

ගූගල් ක්‍රෝම් හි ස්ථායී නාලිකා ස්ථාපනය බීටා නාලිකාව හෝ දේව් නාලිකාව සමඟ ප්‍රතිස්ථාපනය කළ හැකිය ( මුල් ප්‍රවේශ මුදා හැරීමේ නාලිකා බලන්න ).

දේව් නාලිකාවට වඩා යාවත්කාලීන වන ක්‍රෝම් ද්විතියික ස්ථාපනයද ඔබට ස්ථාපනය කළ හැකිය .

... කැනරි ගොඩනැගීම දේව් නාලිකාවට වඩා නිතර යාවත්කාලීන වන අතර එය මුදා හැරීමට පෙර පරීක්ෂා නොකෙරේ. කැනරි ගොඩනැගීම ඇතැම් විට භාවිතා කළ නොහැකි බැවින්, එය ඔබගේ සුපුරුදු බ්‍රව්සරය ලෙස සැකසිය නොහැකි අතර ගූගල් ක්‍රෝම් හි ඉහත ඕනෑම නාලිකාවලට අමතරව ස්ථාපනය කළ හැකිය. ...


විශාල පරීක්ෂණයක්. මම නවතම dev ගොඩනැගීම (10.0.612.3) සොලවන්නෙමි, එබැවින් මම මඳක් රැඳී සිටිමින් බලාපොරොත්තු වෙමි: හොවර් යහපත්කම!
බෙන්

4

මා කරන දෙය තරමක් දුරට සාර්ථක වන බව මම දනිමි, කෙසේ වෙතත් එය පරිපූර්ණව ක්‍රියාත්මක වන අතර සෑම විටම මම එය කරන්නේ එයයි.

ක්‍රෝම් සංවර්ධක මෙවලම් අහෝසි කරන්න

ඉන්පසු, මේ ආකාරයට ඉදිරියට යන්න:

  • පළමුව Chrome සංවර්ධක මෙවලම් අගුළු ඇරී ඇති බවට වග බලා ගන්න.
  • ඉන්පසු, දේව් මෙවලම් කවුළුවේ ඕනෑම පැත්තක් ඔබ සැරිසැරීමේදී පරීක්ෂා කිරීමට අවශ්‍ය මූලද්‍රව්‍යයේ මැදට ගෙන යන්න.

මූලද්රව්යයේ සැරිසරන්න

  • අවසාන වශයෙන්, මූලද්රව්යයේ සැරිසරන්න, මූලද්රව්යය දකුණු ක්ලික් කර පරීක්ෂා කරන්න, ඔබේ මූසිකය Dev Tools කවුළුව තුළට ගෙන යන්න, එවිට ඔබට ඔබේ මූලද්රව්යය සමඟ සෙල්ලම් කිරීමට හැකි වනු ඇත: hover css.

චියර්ස්!


1
අදහස් දැක්වීමක් කිරීමට යාමෙන් මට මෙය නැවත සොයා ගත හැකිය, මන්ද මට එය අවශ්‍ය වනු ඇති බව මම දනිමි! අනපේක්ෂිත තෙවන පාර්ශවීය UI ප්ලගීන සඳහා විශේෂයෙන් වැදගත් වේ.
cfranklin

3

මම hoverක්‍රෝම් සමඟ මෙනු තත්වයක් නිදොස් කරමින් සිටියෙමි , හෝවර් රාජ්‍ය කේතය බැලීමට මෙය කළෙමි:

තුළ Elementsමණ්ඩලයක් කට ක්ලික් කරන්න Toggle Element stateබොත්තම තෝරා :hover.

තුළ Scriptsමණ්ඩලයක් යන්න Event Listeners Breakpointsඅයිතියක් පහළ කොටසේ තෝරා Mouse -> mouseup.

දැන් මෙනුව පරීක්ෂා කර ඔබට අවශ්‍ය කොටුව තෝරන්න. ඔබ මූසික බොත්තම මුදා හරින විට එය නතර වී Elementsපැනලයේ තෝරාගත් මූලද්‍රව්‍ය හොවර් තත්වය පෙන්විය යුතුය ( Stylesකොටස බලන්න).


3

වෙත වෙනස් සැරිසරා Chrome තුළ තත්ත්වය ඉතා පහසු වේ, පහත පියවර අනුගමනය කරන්න:

1) ඔබේ පිටුවේ දකුණු ක්ලික් කර පරීක්ෂා කරන්න තෝරන්න

රූප විස්තරය මෙහි ඇතුළත් කරන්න

2) DOM හි පරීක්ෂා කිරීමට ඔබ කැමති අංගය තෝරන්න

රූප විස්තරය මෙහි ඇතුළත් කරන්න

3) පින් නිරූපකය තෝරන්න රූප විස්තරය මෙහි ඇතුළත් කරන්න (මූලද්‍රව්‍ය තත්වය ටොගල් කරන්න)

4) ඉන්පසු ඇති විටදී සැරිසරන්න

දැන් ඔබට බ්‍රව්සරයේ තෝරාගත් DOM හි හොවර් තත්වය දැක ගත හැකිය !


1

බබිකර් විසින් යෝජනා කරන ලද පහත පියවර අනුගමනය කිරීමෙන් මට ශෛලිය දැකගත හැකි විය - "මූලද්රව්යය දකුණු-ක්ලික් කරන්න, නමුත් ඔබේ මූසික දර්ශකය මූලද්රව්යයෙන් ඉවතට ගෙන නොයන්න, එය හොවර් තත්වයේ තබා ගන්න. යතුරු පුවරුව හරහා මූලද්රව්යය පරීක්ෂා කරන්න තෝරන්න. ඉන්පසු යතුර ඇතුළත් කරන්න.

විලාසය වෙනස් කිරීම සඳහා ඉහත පියවර අනුගමනය කර යතුරුපුවරුවේ ctrl + TAB එබීමෙන් ඔබගේ බ්‍රව්සර පටිත්ත වෙනස් කරන්න. ඔබට නිදොස් කිරීමට අවශ්‍ය ටැබය මත නැවත ක්ලික් කරන්න. ඔබගේ හෝවර් තිරය තවමත් පවතී. දැන් ඔබේ මූසිකය සංවර්ධක මෙවලම් ප්‍රදේශයට ප්‍රවේශමෙන් ගෙන යන්න.


1
ඔබේ මූසිකය
හොවර්

1

මගේ නඩුවේදී, මට අවශ්‍ය වන්නේ බූට්ස්ට්‍රැප් මෙවලම් පුවරුව ඩබග් කිරීමයි. නමුත් ඉහත ක්‍රම මට වැඩ කරන්නේ නැත. මම හිතන්නේ බූට්ස්ට්‍රැප් මෙය ක්‍රියාත්මක කළේ මූසිකය තුළ / පිටත සිදුවීමක් වැනි දෙයක් මගිනි.

කෙසේ වෙතත්, මම බොත්තමක් මත සැරිසරන විට, එය බොත්තමට පහළින් සහෝදර html මූලද්‍රව්‍යයක් ජනනය කරනු ඇත, එබැවින් මම "සංවර්ධක මෙවලම්" කවුළුවේ "මූලද්‍රව්‍ය" පටිත්තෙහි බොත්තමෙහි මව් අංගය තෝරා, බොත්තම එබීමෙන් සහ "Ctrl + C", එවිට මට ජනනය කළ කේතය අඩංගු ප්‍රභව කේතය ඇලවිය හැකිය. අවසන් වරට ජනනය කරන ලද කේතය සොයාගෙන එය "මූලද්‍රව්‍ය" පටිත්තෙහි "HTML ලෙස සංස්කරණය කරන්න" මගින් ප්‍රභව කේතයට එක් කරන්න.

එය යමෙකුට උපකාර කළ හැකි යැයි සිතමි.


0

මම හිතන්නේ මෙය තවදුරටත් ක්‍රෝම් හි ගැටලුවක් නොවන නමුත් එය එසේ විය හැකිය. මම මෙම jQuery පිටපත ලිව්වේ මම TAB යතුර සමඟ ගමන් කරන විට DOM පරීක්ෂා කිරීම සඳහා ය.

'මූසිකය' භාවිතා කිරීම වෙනස් කළහොත්, මෙය පෙනෙන්නේ:

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

ඔබට නැවැත්වීමට අවශ්‍ය මූලද්‍රව්‍යයක් මත යමක් ක්ලික් කළ විට හෝ කරන සෑම අවස්ථාවකම සිදුවීම් හසුරුවන්නා ඉවත් කිරීමට ඔබට එය පහසුවෙන් වෙනස් කළ හැකිය.

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.