ווי צו באַהאַלטן אופֿן ניצן CSS

כיידז אַ לינק מיט CSS קענען זיין געטאן אַ נומער פון וועגן, אָבער מיר וועלן קוקן אין צוויי מעטהאָדס וואָס URL קענען זיין גאָר פאַרבאָרגן פון מיינונג. אויב איר ווילן צו שאַפֿן אַ סקאַוואַנדזשער גיינ אַף אָדער יסטער יי אויף דיין פּלאַץ, דאָס איז אַ טשיקאַווע וועג צו באַהאַלטן לינקס.

דער ערשטער וועג איז דורך ניצן "גאָרניט" ווי די טייַטל-געשעענישן CSS פאַרמאָג ווערט. די אנדערע איז דורך פשוט קאַלערינג די טעקסט צו גלייַכן דעם הינטערגרונט פון די בלאַט.

האַלטן אין גייַסט אַז קיין אופֿן וועט מאַכן די לינק גאָר פאַרשווינדן פון דער געפונען ווען איר זוכט די מקור קאָד. אָבער, די וויזאַטערז וועט נישט האָבן אַ פּשוט, גלייַך וועג צו זען עס, און דיין אָנהייבער וויזאַטערז וועט נישט האָבן אַ קלו ווי צו געפינען דעם לינק.

באַמערקונג: אויב איר זוכט פֿאַר ינסטראַקשאַנז אויף ווי צו פאַרבינדן אַ פונדרויסנדיק סטיל בלאַט, די ינסטראַקשאַנז זענען נישט וואָס איר ניטאָ נאָך. זען וואָס אַ פונדרויסנדיק סטייל בלאַט? אַנשטאָט.

דיסאַבלע די פּוינטער עווענט

דער ערשטער אופֿן מיר קענען נוצן צו באַהאַלטן אַ URL איז צו מאַכן די לינקס טאָן גאָרנישט. ווען דער מאַוס הייבט איבער דעם לינק, עס וועט נישט ווייַזן וואָס די URL ווייזט און עס וועט נישט לאָזן איר גיט עס.

שרייַבן די HTML קאָררעקטלי

איינער די וועב בלאַט, מאַכן זיכער די כייפּערלינגק לייענט ווי דאָס:

ThoughtCo.com

פון קורס, "https://www.thoughtco.com/" דאַרף צו פונט צו די פאַקטיש URL אַז איר ווילט פאַרבאָרגן, און ThoughtCo.com קענען זיין געביטן צו קיין וואָרט אָדער פראַזע איר ווי אַז באשרייבט די לינק.

דער געדאַנק דאָ איז אַז די קלאַס אַקטיוו וועט זיין געוויינט מיט די CSS ונטער צו יפעקטיוולי באַהאַלטן די לינק.

ניצן די CSS קאָד

דער CSS קאָד דאַרף צו אַדרעס די אַקטיוו קלאַס און דערקלערן צו דעם בלעטערער וואָס די געשעעניש אויף די לינקס גיט, זאָל זיין "גאָרניט," ווי דאָס:

. אַקטיוו {pointer-events: none; לויפֿער: פעליקייַט; }

איר קענען זען דעם אופֿן אין קאַמף איבער JSFiddle. אויב איר באַזייַטיקן די CSS קאָד דאָרט, און דעמאָלט רערון די דאַטן, די לינק פּלוצלינג ווערן קליקקאַבלע און נוצלעך. דעם איז ווייַל ווען די קסס איז נישט געווענדט, די לינק ביכייווז נאָרמאַלי.

באַמערקונג: געדענק אַז אויב דער באַניצער קוקן די מקור קאָד די בלאַט, זיי וועט זען דעם לינק און וויסן פּונקט ווו עס גייט ווייַל ווי מיר זען אויבן, די קאָד איז נאָך דאָרט, עס איז נישט נוצלעך.

טוישן די לינק & # 39; ס קאָליר

נאָרמאַללי, אַ וועב דיזיינער וועט מאַכן כייפּערלינגקס אַ אַנדערש קאָליר ווי דער הינטערגרונט אַזוי אַז וויזאַטערז קענען אַקטשאַוואַלי זען זיי און וויסן ווו זיי גיין. אָבער, מיר זענען דאָ צו באַהאַלטן לינקס , אַזוי לאָזן 'ס זען ווי צו טוישן די קאָליר צו גלייַכן דעם בלאַט.

דעפינירן אַ קאַסטאַם קלאַס

אויב מיר נוצן די זעלבע בייַשפּיל פון דער ערשטער אופֿן אויבן, מיר קענען פשוט טוישן די קלאַס צו וואָס מיר ווילן אַזוי אַז ספּעציעל ספּעציעל לינקס זענען פאַרבאָרגן.

אויב מיר האבן נישט נוצן אַ קלאַס און אַנשטאָט געווענדט די קסס פון אונטן צו יעדער לינק, דעריבער, אַלע פון ​​זיי וואָלט פאַרשווינדן. אַז ס 'נישט וואָס מיר זענען נאָך דאָ, אַזוי מיר וועט נוצן דעם HTML קאָד וואָס איז ניצן די מנהג היגעמע קלאַס:

ThoughtCo.com

געפֿינען אויס וואָס פֿאַרב צו נוצן

איידער מיר אַרייַן דעם צונעמען CSS קאָד צו באַהאַלטן דעם לינק, מיר דאַרפֿן צו געפֿינען וואָס קאָליר מיר ווילן צו נוצן. אויב איר האָבן אַ האַרט הינטערגרונט שוין ווי ווייַס אָדער שוואַרץ, דעמאָלט עס איז גרינג. אָבער, אנדערע ספּעציעל פארבן דאַרפֿן צו זיין פּינטלעך.

פֿאַר בייַשפּיל, אויב דיין הינטערגרונט פֿאַרב האט אַ כעקס ווערט פון ע6 דעד 1 , איר דאַרפֿן צו וויסן אַז פֿאַר די קסס קאָד צו אַרבעט רעכט פֿאַר די בלאַט איר ווילן צו פאַרשווינדן.

עס זענען פילע פון ​​די "קאָליר פּיקקער" אָדער "ייעדראָפּפּער" מכשירים בנימצא, איינער פון וואָס איז גערופן ColorPick Eyedropper פֿאַר די קראָום בלעטערער. ניצן עס צו מוסטער די הינטערגרונט פֿאַרב פון דיין וועב בלאַט צו באַקומען די העקס קאָלירן.

קאַסטאַמייז די קסס צו טוישן די קאָליר

איצט אַז איר האָבן די קאָליר אַז די לינק זאָל זיין, עס ס צייַט צו נוצן דעם און די מנהג קלאַס ווערט פון אויבן, צו שרייַבן די CSS קאָד:

.הידעמע {color: # e6ded1; }

אויב דיין הינטערגרונט פֿאַרב איז פּשוט ווי ווייַס אָדער גרין, איר טאָן ניט האָבן צו שטעלן דעם # צייכן איידער עס:

.הידעמע {קאָליר: ווייַס; }

זען דעם אופֿן פון דעם מעטאָד אין דעם JSFiddle.