Προσθέστε κείμενο με δείκτη χωρίς JavaScript, όπως τοποθετούμε πάνω στο όνομα χρήστη

Prostheste Keimeno Me Deikte Choris Javascript Opos Topothetoume Pano Sto Onoma Chreste



Σε πολλές ιστοσελίδες, συχνά βλέπουμε ένα κείμενο που εμφανίζεται σε ένα συγκεκριμένο στοιχείο όταν τοποθετούμε το δείκτη του ποντικιού πάνω του και εξαφανίζεται όταν μετακινούμε τον κέρσορα κάπου αλλού στην οθόνη. Αυτό το κείμενο ονομάζεται κείμενο αιώρησης. Στο JavaScript, είναι εύκολο να προσθέσετε το κείμενο του δείκτη του ποντικιού σε ένα στοιχείο. Ωστόσο, είναι επίσης δυνατό να προσθέσετε ένα κείμενο αιώρησης σε ένα έγγραφο HTML χρησιμοποιώντας είτε το '
'στοιχείο ή το ' ' στοιχείο με το χαρακτηριστικό τίτλος.

Αυτό το άρθρο θα παρουσιάσει δύο χρήσιμες μεθόδους για να προσθέσετε ένα κείμενο αιώρησης σε HTML χωρίς τη χρήση JavaScript:

Μέθοδος 1: Προσθήκη κειμένου Hover μέσω του στοιχείου 'div'.

Μπορεί να προστεθεί ένα κείμενο αιώρησης χρησιμοποιώντας απλά το '

' στοιχείο με το ' τίτλος 'ιδιότητα στο άνοιγμα' <ετικέτα> '. Ο προγραμματιστής πρέπει να προσθέσει το κείμενο του δείκτη του ποντικιού στο χαρακτηριστικό 'title' μέσα στο '
' η ετικέτα ανοίγματος και το στοιχείο HTML προστίθεται μεταξύ του ανοίγματος και του κλεισίματος '
ετικέτες '. Το κείμενο μέσα στο «
Το στοιχείο δοχείου μπορεί να είναι οποιουδήποτε τύπου. Για παράδειγμα, ένα «

'επικεφαλίδα',

' στοιχείο παραγράφου ή ένα απλό απλό κείμενο.





Παράδειγμα

Ας γράψουμε ένα απλό παράδειγμα για να προσθέσουμε το '

' στοιχείο για να προσθέσετε το κείμενο του δείκτη του ποντικιού πάνω από ένα στοιχείο HTML:



< div τίτλος = 'Αυτό είναι το κείμενο αιώρησης' > Hover Over Me! < / div >

Σύμφωνα με τον παραπάνω κώδικα:



  • ΕΝΑ '
    Το στοιχείο ' έχει προστεθεί με το ' τίτλος 'ιδιότητα στο άνοιγμα'
    ετικέτα '.
  • Ο ' τίτλος Το χαρακτηριστικό ” περιέχει το κείμενο που υποτίθεται ότι εμφανίζεται ενώ ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω από το κείμενο.
  • Ανάμεσα στο άνοιγμα και το κλείσιμο»
    Οι ετικέτες 'είναι το κείμενο που θα εμφανίζεται στη διεπαφή με το δείκτη του ποντικιού πάνω από το οποίο θα εμφανιστεί το κείμενο του δείκτη.

Το παράδειγμα που προστέθηκε παραπάνω θα εμφανίσει την ακόλουθη έξοδο:



Μέθοδος 2: Προσθήκη Hover Text Through 'span' Element

Μπορεί επίσης να προστεθεί ένα κείμενο αιώρησης χρησιμοποιώντας το ' ' στοιχείο σε HTML. Το μόνο που χρειάζεται είναι να προσθέσετε το κείμενο του δείκτη του ποντικιού στο χαρακτηριστικό τίτλος και το πραγματικό στοιχείο HTML για το οποίο προστίθεται το κείμενο αιώρησης μεταξύ του ανοίγματος και του κλεισίματος ' ετικέτες '.



Παράδειγμα

Ας προσθέσουμε ένα απλό παράδειγμα για να εισαγάγετε το ' ' στοιχείο στο έγγραφο HTML για την προσθήκη του κειμένου του δείκτη του ποντικιού πάνω από ένα στοιχείο HTML:

< σπιθαμή τίτλος = 'Αυτό είναι το κείμενο αιώρησης' >Hover Over Me!< / σπιθαμή >

Στο παραπάνω παράδειγμα:

  • ΕΝΑ ' Το στοιχείο ' έχει προστεθεί με το ' τίτλος 'ιδιότητα μέσα στο άνοιγμα' ετικέτα '.
  • Ο ' τίτλος Το χαρακτηριστικό ” περιέχει το κείμενο που υποτίθεται ότι εμφανίζεται όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω.
  • Μεταξύ ανοίγματος και κλεισίματος» Οι ετικέτες ” είναι το κείμενο που θα εμφανιστεί στον χρήστη που τοποθετείται πάνω από το οποίο θα εμφανιστεί το κείμενο του δείκτη.

Παραγωγή

Αυτό συνοψίζει τις πιθανές μεθόδους για να προσθέσετε ένα κείμενο αιώρησης χωρίς τη χρήση JavaScript.

συμπέρασμα

Ένα κείμενο αιώρησης μπορεί εύκολα να προστεθεί σε HTML χωρίς να απαιτείται η χρήση συναρτήσεων JavaScript. Ο προγραμματιστής πρέπει να χρησιμοποιήσει είτε το '

'στοιχείο ή το ' ” στοιχείο που δημιουργεί το στοιχείο HTML και, στη συνέχεια, προσθέτει το χαρακτηριστικό τίτλος που ορίζει το κείμενο του δείκτη. Αυτή η ανάρτηση είναι ένας καλός οδηγός σχετικά με τη μέθοδο προσθήκης του κειμένου του δείκτη χωρίς να απαιτείται JavaScript.

Αλλα

Κατηγορία

Δημοφιλείς Αναρτήσεις

Pandas στο λεξικό

Πώς να διαιρέσετε δύο αριθμούς σε JavaScript

Πώς να αποκτήσετε τη διεύθυνση IP ενός Docker Container από τον κεντρικό υπολογιστή στα Windows

Παρακολουθήστε το Raspberry Pi μέσω Monit

Συνάρτηση Sample() στο R

Πώς να αποκτήσετε πρόσβαση στην ιδιότητα Window.screenLeft στο JavaScript;

Πώς να εγκαταστήσετε το Rust στο Ubuntu 22.04

Εντολή βοήθειας Linux

Πώς να τραβήξετε στιγμιότυπα οθόνης στο Ubuntu

Τι είναι οι βάσεις δεδομένων που έχουν κατασκευαστεί για σκοπούς στο AWS;

Πώς λειτουργεί το For-Each Loop στο TypeScript;

Πώς να μετατρέψετε τη συμβολοσειρά σε πίνακα χαρακτήρων στο Arduino χρησιμοποιώντας τη συνάρτηση toCharArray

Πώς να βρείτε ιδιοτιμές και ιδιοδιανύσματα στο MATLAB χρησιμοποιώντας τη συνάρτηση eig();

Πώς να αρχικοποιήσετε και να δηλώσετε λεξικό στο TypeScript

Πώς να δημιουργήσετε καρτέλες με CSS και JavaScript;

Πώς να ελέγξετε την υγεία του σκληρού δίσκου στα Windows 11;

Πώς να φτιάξετε ένα χρυσό καρότο στο Minecraft

Πώς να αλλάξετε την κλάση ενός στοιχείου HTML με JavaScript;

Πώς να ορίσετε τους ορισμούς εργασιών του Amazon ECS;

Πώς να χρησιμοποιήσετε την υπηρεσία κειμένου Amazon από τον πίνακα ελέγχου AWS;